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 ?

>Solution :

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

Leave a Reply