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

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

Answer

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>