Unable to retrieve JSON element using Fetch

Question

Unable to retrieve JSON element using Fetch

I'm attempting to retrieve a JSON file and exhibit its components within a div.

Here is the JSON data I have:

[
    {
       "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 initial section fetches the JSON data. The subsequent part is intended to showcase the two elements in a div (here I am just printing the outcomes):

 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) // retrieves only the first host_id
          console.log(data[i][i].host_id) // also retrieves only the first host_id
        }
      }

Is there a way for me to obtain all the host IDs?

javascript json fetch

Answer 1

Answer №1

If you want to extract all the host ids from your JSON dataset, simply update the appendData function to iterate through each item in the array and then go through every key within each object to retrieve the host_id value.

function appendData(data) {
  for (let i = 0; i < data.length; i++) {
    const obj = data[i];
    for (const key in obj) {
      const host_id = obj[key].host_id;
      console.log(host_id);
      // Instead of displaying the host_id in the console, consider appending it to a div element
    }
  }
}

Answer 2

If you want to extract all the host ids from your JSON dataset, simply update the appendData function to iterate through each item in the array and then go through every key within each object to retrieve the host_id value.

function appendData(data) {
  for (let i = 0; i < data.length; i++) {
    const obj = data[i];
    for (const key in obj) {
      const host_id = obj[key].host_id;
      console.log(host_id);
      // Instead of displaying the host_id in the console, consider appending it to a div element
    }
  }
}

Answer 3

Answer №2

Exploring multiple methods to iterate through an object nested in an array.

function main() {
  fetch('...')
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      processData(data);  // Approach #1
      processData2(data); // Approach #2
    })
    .catch(function(err) {
      console.log(err);
    });
}

// Property destructuring + for-in loop
function processData(data) {
  const [hostsObj] = data;
  for (let key in hostsObj) {
    const { host_id } = hostsObj[key];
    console.log(host_id);
  }
}

// Inline property destructuring + Object.values + forEach
function processData2([hostsObj]) {
  Object.values(hostsObj).forEach(({ host_id }) => {
    console.log(host_id);
  });
}

// TESTING PURPOSES 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",
      "languages": "['English']",
      "location": "London, United Kingdom",
      "is_superhost": "False",
      "is_viewer_profile_owner": "False",
      "reviews_count": "1228",
      "url": "https://en.airbnb.ca/users/show/129230780"
    },
    "1": {
      "host_id": "121683635",
      "host_names": "Evolve",
      "host_since": "2017-03-20T16:26:31Z",
      "nb_listings": "700",
      "languages": "['English', 'Spanish', 'French']",
      "location": "United States",
      "is_superhost": "False",
      "is_viewer_profile_owner": "False",
      "reviews_count": "16495",
      "url": "https://en.airbnb.ca/users/show/121683635"
    }
  }])
});

main();

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

Answer 4

Exploring multiple methods to iterate through an object nested in an array.

function main() {
  fetch('...')
    .then(function(response) {
      return response.json();
    })
    .then(function(data) {
      processData(data);  // Approach #1
      processData2(data); // Approach #2
    })
    .catch(function(err) {
      console.log(err);
    });
}

// Property destructuring + for-in loop
function processData(data) {
  const [hostsObj] = data;
  for (let key in hostsObj) {
    const { host_id } = hostsObj[key];
    console.log(host_id);
  }
}

// Inline property destructuring + Object.values + forEach
function processData2([hostsObj]) {
  Object.values(hostsObj).forEach(({ host_id }) => {
    console.log(host_id);
  });
}

// TESTING PURPOSES 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",
      "languages": "['English']",
      "location": "London, United Kingdom",
      "is_superhost": "False",
      "is_viewer_profile_owner": "False",
      "reviews_count": "1228",
      "url": "https://en.airbnb.ca/users/show/129230780"
    },
    "1": {
      "host_id": "121683635",
      "host_names": "Evolve",
      "host_since": "2017-03-20T16:26:31Z",
      "nb_listings": "700",
      "languages": "['English', 'Spanish', 'French']",
      "location": "United States",
      "is_superhost": "False",
      "is_viewer_profile_owner": "False",
      "reviews_count": "16495",
      "url": "https://en.airbnb.ca/users/show/121683635"
    }
  }])
});

main();

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

Unable to retrieve JSON element using Fetch

Answer №1

Answer №2

Similar questions

On IOS, Three.js ensures that the RGB values of a texture are set to zero whenever the ALPHA value

Is there a way to create triangles on all four corners of an image using canvas in JavaScript?

What is the method to activate map dragging in Leaflet only while the spacebar is pressed?

React form input values fail to refresh upon submission

Is there a way to determine if a directory is empty using Node.js?

How to Show Firestore Query Results in a React Native App

Learn how to create a "generated" texture coordinate in three.js similar to how it is done in Blender Cycles

Dispensing guarantees with Protractor

Ensuring form accuracy upon submission in AngularJS 1.5: Understanding the $invalid state in relation to $pristine field

How to verify if both MySQL queries in Node.js have fetched results and then display the page content

Retrieve a document through Django's rest framework after verifying the user's credentials

Is it possible to display partial html templates by accessing the local url and blending them with the main index.html file?

Why are the $refs always empty or undefined within Vue components?

The JQuery Ajax call returned with a status of 0 and an empty ResponseText

ng-init assign value to a new object

Incorporate JSON information into HTML dropdown menu using Google API

Access to the Express Node.js server is restricted to the machine that is currently hosting the server

Invoking an express route using JavaScript

Retrieving data from a detailed JSON structure

How can I dynamically generate properties from a Json string in Winforms using C#?