My json api fetch seems not to work, what should I use with data?

Question

I cannot seem to get the categories(planets,dwarfplanets and other) inside the dropdown menu. I know I should use data.something but idk what, any help?

HTML

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

The link to my json api [https://howest-gp-wfa.github.io/st-2021-1-S2-ee-solar-system-Jonas-Bundervoet/api/data.json][1]

For my javascript I have this

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

https://stackoverflow.com/questions/8674618/adding-options-to-select-with-javascript — Andres Paul, Jan 19 '21 at 08:47

Reyno · Accepted Answer · 2021-01-19T08:59:05.307

You are pretty close. To get all the different types out of your data object you could use Object.keys then replace data in your loop with data[type].

Instead of add you need to use appendChild to add elements into another DOM node.

"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>

EDIT: Categories instead of planet names

"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>

This looks good, but I am still wondering how to get the 3 "categories: eg:(planets,dwarfplanets and other) inside the select — , Jan 19 '21 at 08:51
@OfficialRules as you can see the `Object.keys` return the name of the categories. You could use that and append them like i did with the planet names. — Reyno, Jan 19 '21 at 08:55
@OfficialRules I created a quick edit (second snippet) to show you what i meant — Reyno, Jan 19 '21 at 08:59

score 0 · Answer 2 · answered Jan 19 '21 at 08:55

Your problem is that you are assuming data is an array, but it is actually an object. You can't do Object.length on an object to iterate over it

Instead, you could use the for...in statement to iterate over an object.

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

As the other answer said, you were very close!

hmm I see, thank you all this realy helped! – Jan 19 '21 at 08:57 — , Jan 19 '21 at 08:57

score 0 · Answer 3 · answered Jan 19 '21 at 08:56

The api call's response is not an array, it's an 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);  
  });
}

My json api fetch seems not to work, what should I use with data?

3 Answers3