Can't access json element using Fetch

I'm trying to fetch a json file and display its elements in a div.

This is my json data :

[
    {
       "0":{
          "host_id":"129230780",
          "host_names":"STK Homes",
          "host_since":"2017-05-07T12:45:49Z",
          "nb_listings":"2128",
          "langues":"['English']",
          "localisation":"Londres, Royaume-Uni",
          "is_superhost":"False",
          "is_viewer_profile_owner":"False",
          "reviews_count":"1228",
          "url":"https://fr.airbnb.ca/users/show/129230780"
       },
       "1":{
          "host_id":"121683635",
          "host_names":"Evolve",
          "host_since":"2017-03-20T16:26:31Z",
          "nb_listings":"700",
          "langues":"['English', 'Espa\u00f1ol', 'Fran\u00e7ais']",
          "localisation":"\u00c9tats-Unis",
          "is_superhost":"False",
          "is_viewer_profile_owner":"False",
          "reviews_count":"16495",
          "url":"https://fr.airbnb.ca/users/show/121683635"
       }
    }
]

This is my code. The first part fetches the json data. The second part is supposed to display the two elements in a div (here I'm just printing the results):

 fetch(json object)
        .then(function (response) {
          return response.json(); 
      })
        .then(function (data) {
          appendData(data);
      })
        .catch(function (err) {
        console.log(err);
      });

   
      function appendData(data) {
        for (var i = 0; i < data.length; i++) {
          console.log(data[0][i].host_id) // return just the first host_id
          console.log(data[i][i].host_id) // also return just the first host_id
        }
      } 

How could I return all the host ids ?

to To return all the host ids from the JSON data, you can modify the appendData function to loop through each object in the array and then loop through each key in the object to get the host_id value.

function appendData(data) {
  for (var i = 0; i < data.length; i++) {
    var obj = data[i];
    for (var key in obj) {
      var host_id = obj[key].host_id;
      console.log(host_id);
      // You can append the host_id to a div element instead of logging to the console
    }
  }
}

There's are more than one way to loop over an object wrapped inside of an array.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function main() {
fetch('...')
.then(function(response) {
return response.json();
})
.then(function(data) {
appendData(data);  // Scenario #1
appendData2(data); // Scenario #2
})
.catch(function(err) {
console.log(err);
});
}
// Prop destructure + for-in loop
function appendData(data) {
const [hostsObj] = data;
for (let key in hostsObj) {
const { host_id } = hostsObj[key];
console.log(host_id);
}
}
// Inline prop destructure + Object.values + forEach
function appendData2([hostsObj]) {
Object.values(hostsObj).forEach(({ host_id }) => {
console.log(host_id);
});
}
// TEST ONLY :- Override / mock the default Fetch API
window.fetch = () => Promise.resolve({
json: () => Promise.resolve([{
"0": {
"host_id": "129230780",
"host_names": "STK Homes",
"host_since": "2017-05-07T12:45:49Z",
"nb_listings": "2128",
"langues": "['English']",
"localisation": "Londres, Royaume-Uni",
"is_superhost": "False",
"is_viewer_profile_owner": "False",
"reviews_count": "1228",
"url": "https://fr.airbnb.ca/users/show/129230780"
},
"1": {
"host_id": "121683635",
"host_names": "Evolve",
"host_since": "2017-03-20T16:26:31Z",
"nb_listings": "700",
"langues": "['English', 'Espa\u00f1ol', 'Fran\u00e7ais']",
"localisation": "\u00c9tats-Unis",
"is_superhost": "False",
"is_viewer_profile_owner": "False",
"reviews_count": "16495",
"url": "https://fr.airbnb.ca/users/show/121683635"
}
}])
});
main();

<!-- language: lang-css -->

.as-console-wrapper { top: 0; max-height: 100% !important; }

<!-- end snippet -->