从JS对象的属性中添加HTML数据列表选项

Question

<datalist id="city-list">
</datalist>
<script>
let list = document.getElementById('city-list');
const cities = [
    {
        id: 0,
        city: "Buenos Aires",
        country: "Argentina",
        codeIATA: "AEP",
        aeroName: "Aeroparque Internacional Jorge Newbery",
        coordX: -58.370277777778,
        coordY: -34.575,
    },
    {
        id: 1,
        city: "Bariloche",
        country: "Argentina",
        codeIATA: "BRC",
        aeroName: "Aeropuerto Internacional Teniente Luis Candelaria",
        coordX: -71.166666666667,
        coordY: -41.133333333333,
    },
    {
        id: 2,
        city: "Córdoba",
        country: "Argentina",
        codeIATA: "COR",
        aeroName: "Aeropuerto Internacional Ingeniero Ambrosio Taravella",
        coordX: -64.216666666667,
        coordY: -31.316666666667,
    },
];
cities.forEach(function(city){
    let option = document.createElement('option');
    option.value = city;
    list.appendChild(option);
});
</script>

如何将每个对象的属性(在本例中为CITY)添加为数据表的选项?我似乎只添加了整个对象，我想只选择它们的CITY属性。

Answer 1

在forEach函数中，您引用的城市是整个对象，请尝试执行以下操作:

cities.forEach(function(city){
let option = document.createElement('option');
option.value = city.city; //reference the city part of your object
list.appendChild(option);
});