Question 109286 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

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', 'Espau00f1ol', 'Franu00e7ais']",
          "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 ?

Tags:

2

Answers


  1. 0

    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
    }
  }
}
    Login or Signup to reply.
  2. 0

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

    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', 'Espau00f1ol', 'Franu00e7ais']",
      "localisation": "u00c9tats-Unis",
      "is_superhost": "False",
      "is_viewer_profile_owner": "False",
      "reviews_count": "16495",
      "url": "https://fr.airbnb.ca/users/show/121683635"
    }
  }])
});

main();
    .as-console-wrapper { top: 0; max-height: 100% !important; }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search