在.JSON文件中创建特定对象并创建选择菜单

7cwmlq89 于 2023-11-20 发布在其他

关注(0)|答案(2)|浏览(78)

我正在创建选择菜单，数据从.JSON文件传递，但我的.JSON文件有2个数组，我需要传递唯一的country[]数组。我已经写了一些代码，但它不工作。任何帮助？
我的.JS文件

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);  
  });

字符串
我的.JSON文件

{
    "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 }
    ]
}

型
也许我无法表达我的问题，这就是为什么我用下面的图片演示。

的数据

JSON

来源：https://stackoverflow.com/questions/60870658/accessing-specific-object-in-json-file-and-creating-select-menu

2条答案

按热度按时间

nkoocmlb1#

在.then处理程序中将data替换为data.country（您希望通过country键定义数组，但您正在循环整个JSON对象）。还将“.add”替换为“.appendChild”。
最后一点：没有一个对象定义了“abbreviation”属性，因此每个元素的值都是未定义的，这将在以后引起更多的问题。所以一定要在JSON中添加缩写，或者找到一种不同的方法来定义每个选项的value属性。

赞(0）回复(0）举报 2023-11-20

1yjd4xko2#

你需要在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);
   });
});

字符串

赞(0）回复(0）举报 2023-11-20

我来回答

在.JSON文件中创建特定对象并创建选择菜单

2条答案

相关问题

热门标签

最新问答