доступ к указанному c объекту в. JSON файле и создание меню выбора

Question

Я создаю меню выбора с данными, передаваемыми из файла. JSON, однако мой файл. JSON имеет 2 массива, и мне нужно передать единственный массив country []. Я написал некоторый код, но он не работает. любая помощь ?

my. JS file

let dropdown = document.getElementById("listCountry");
dropdown.length = 0;

let deafultOption = document.createElement('option');
deafultOption.text = 'Countries';

dropdown.add(deafultOption);
dropdown.selectedIndex = 0;

fetch('fleet.json')  
  .then(  
    function(response) {  
      if (response.status !== 200) {  
        console.warn('Looks like there was a problem. Status Code: ' + 
          response.status);  
        return;  
      }

      // Examine the text in the response  
      response.json().then(function(data) {  
        let option;

        for (let i = 0; i < data.length; i++) {
          option = document.createElement('option');
          option.text = data[i].name;
          option.value = data[i].abbreviation;
          dropdown.add(option);
        }    
      });  
    }  
  )  
  .catch(function(err) {  
    console.error('Fetch Error -', err);  
  });

my. JSON file

{
    "country": [
    { "id": 1, "name" : "England" },
    { "id": 2, "name" : "Holland" },
    { "id": 3, "name" : "France" },
    { "id": 4, "name" : "Russia" }
    ],

    "ship": [
    { "id": 1, "name": "Greenwich", "speed" : 12, "country_id" : 1 },
    { "id": 2, "name": "Eendracht", "speed" : 22, "country_id" : 2 },
    { "id": 3, "name": "Kingfisher", "speed" : 10, "country_id" : 1 },
    { "id": 4, "name": "Fury", "speed" : 12, "country_id" : 1 },
    { "id": 5, "name": "Hercule", "speed" : 33, "country_id" : 3 },
    { "id": 6, "name": "Licorne", "speed" : 33, "country_id" : 3 },
    { "id": 7, "name": "Arkhangel Gavriil", "speed" : 44, "country_id" : 4 }
    ]
}

Может быть, я не смог express мой вопрос, поэтому я продемонстрировано с рисунком ниже.

Answer 1

Вам нужно перебрать data.country. Поместите это туда, где у вас есть response.json().then().

response.json().then(function(data) {  
   let option;
   const countries = data.country;
   // Array.prototype.forEach() iterates over all values in an array
   countries.forEach(cont => {
       option = document.createElement('option');
       option.text = cont.name;
       dropdown.add(option);
   });
});

Answer 2

Замените data на data.country в вашем обработчике .then (вы хотите, чтобы массив определялся ключом country, но вместо этого вы перебираете весь объект JSON). Также замените «.add» на «.appendChild».

И последнее замечание: ни у одного из объектов не определено свойство «abbreviation», поэтому значение каждого элемента будет неопределенным, что приведет к дальнейшим проблемам. Поэтому обязательно добавьте сокращения к JSON или найдите другой способ определения свойства value для каждого параметра.