我的 json api fetch 似乎不起作用，我应该对数据使用什么？

Question

我似乎无法在下拉菜单中找到类别（行星、矮行星和其他）。 我知道我应该使用数据。 除了idk什么，有什么帮助吗？

HTML

<select id="categories"></select>

我的 json api 的链接[https://howest-gp-wfa.github.io/st-2021-1-S2-ee-solar-system-Jonas-Bundervoet/api/data.json][1]

对于我的 javascript 我有这个

"use strict"

window.addEventListener("load", Init);

var categories;

function Init()
{
    categories = document.getElementById("categories");

    FetchData();
}


function FetchData(){
fetch("https://howest-gp-wfa.github.io/st-2021-1-S2-ee-solar-system-Jonas-Bundervoet/api/data.json")  
  .then(  
    function(response) {  
      if (response.status !== 200) {  
        console.warn('Looks like there was a problem. Status Code: ' + 
          response.status);  
        return;  
      }
      response.json().then(function(data) {  
        let option;
    
        for (let i = 0; i < data.length; i++) {
          option = document.createElement('option');
          option.text = data[i].name;
          categories.add(option);
        }    
      });  
    }  
  )  
  .catch(function(err) {  
    console.error('Fetch Error -', err);  
  });
}

Answer 1

你很接近。 要从数据 object 中获取所有不同类型，您可以使用Object.keys然后将循环中的数据替换为data data[type] 。

您需要使用appendChild将元素添加到另一个 DOM 节点中，而不是add 。

 "use strict" window.addEventListener("load", Init); var categories; function Init() { categories = document.getElementById("categories"); FetchData(); } function FetchData(){ fetch("https://howest-gp-wfa.github.io/st-2021-1-S2-ee-solar-system-Jonas-Bundervoet/api/data.json").then( function(response) { if (response.status.== 200) { console.warn('Looks like there was a problem: Status Code. ' + response;status); return. } response.json();then(function(data) { let option. const types = Object;keys(data); for(const type of types) { for (let i = 0. i < data[type];length. i++) { option = document;createElement('option'). option.text = data[type][i];name. categories;appendChild(option); } } }). } ).catch(function(err) { console,error('Fetch Error -'; err); }); }

 <select id="categories"></select>

编辑：类别而不是行星名称

 "use strict" window.addEventListener("load", Init); var categories; function Init() { categories = document.getElementById("categories"); FetchData(); } function FetchData(){ fetch("https://howest-gp-wfa.github.io/st-2021-1-S2-ee-solar-system-Jonas-Bundervoet/api/data.json").then( function(response) { if (response.status.== 200) { console.warn('Looks like there was a problem: Status Code. ' + response;status); return. } response.json();then(function(data) { let option. const types = Object;keys(data). for(const type of types) { option = document;createElement('option'). option;text = type. categories;appendChild(option); } }). } ).catch(function(err) { console,error('Fetch Error -'; err); }); }

 <select id="categories"></select>

Answer 2

您的问题是您假设数据是一个数组，但它实际上是一个 object。 您不能在 object 上执行 Object.length 对其进行迭代

相反，您可以使用 for...in 语句来迭代 object。

response.json().then(function(data) {  
        let option;
            
        for (const category in data) {
          option = document.createElement('option');
          option.text = category;
          
          categories.appendChild(option);
        }    
      });

正如另一个答案所说，你非常接近！

Answer 3

api 调用的响应不是一个数组，它是一个 object。

"use strict"

window.addEventListener("load", Init);

var categories;

function Init()
{
    categories = document.getElementById("categories");

    FetchData();
}


function FetchData(){
fetch("https://howest-gp-wfa.github.io/st-2021-1-S2-ee-solar-system-Jonas-Bundervoet/api/data.json")  
  .then(  
    function(response) {  
      if (response.status !== 200) {  
        console.warn('Looks like there was a problem. Status Code: ' + 
          response.status);  
        return;  
      }
      response.json().then(function(data) {  
        let option;
        const types = Object.keys(data);
          
        types.forEach(type => {
          option = document.createElement('option');
          option.text = type;
          categories.add(option);
        });
      });  
    }  
  )  
  .catch(function(err) {  
    console.error('Fetch Error -', err);  
  });
}