Quick Tip: How to Loop Through a JSON Response in JavaScript

When fetching data from a remote server, the server’s response will often be in JSON format. In this quick tip, I’ll demonstrate how you can use JavaScript to parse the server’s re…


This content originally appeared on SitePoint and was authored by James Hibbard

How to Loop Through a JSON Response in JavaScript

When fetching data from a remote server, the server’s response will often be in JSON format. In this quick tip, I’ll demonstrate how you can use JavaScript to parse the server’s response, so as to access the data you require.

This process will typically consist of two steps: decoding the data to a native structure (such as an array or an object), then using one of JavaScript’s in-built methods to loop through that data structure. In this article, I’ll cover both steps, using plenty of runnable examples.

What is JSON?

Before we look at how to deal with JSON, let’s take a second to understand what it is (and what it isn’t).

JSON stands for JavaScript Object Notation. It’s a language-independent, text-based format, which is commonly used for transmitting data in web applications. JSON was inspired by the JavaScript Object Literal notation, but there are differences between the two. For example, in JSON keys must be quoted using double quotes, while in object literals this is not the case.

There are two ways data can be stored in JSON:

  • a collection of name/value pairs (aka a JSON object)
  • an ordered list of values (aka a JSON array)

When receiving data from a web server, the data is always a string, which means that it’s your job to convert it into a data structure you can work with.

If you’d like to find out more about how JSON works, please visit the JSON website.

Fetching JSON from a Remote API

In the following examples, we’ll use the fantastic icanhazdadjoke API. As you can read in its documentation, making a GET request where the Accept header is set to application/json will see the API return a JSON payload.

Let’s start with a simple example:

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    console.log(typeof xhr.responseText);
    console.log(xhr.responseText);
  }
};
xhr.open('GET', 'https://icanhazdadjoke.com/', true);
xhr.setRequestHeader('Accept', 'application/json');
xhr.send(null);

// string
// {"id":"daaUfibh","joke":"Why was the big cat disqualified from the race? Because it was a cheetah.","status":200}

As we can see, the server returned us a string. We’ll need to parse this into a JavaScript object before we can loop through its properties. We can do this with JSON.parse():

if (xhr.readyState === XMLHttpRequest.DONE) {
  const res = JSON.parse(xhr.responseText);
  console.log(res);
};

// Object { id: "fiyPR7wPZDd", joke: "When does a joke become a dad joke? When it becomes apparent.", status: 200 }

Once we have our response as a JavaScript object, there are a number of methods we can use to loop through it.

Use a for...in Loop

A for…in loop iterates over all enumerable properties of an object:

const res = JSON.parse(xhr.responseText);

for (const key in res){
  if(obj.hasOwnProperty(key)){
    console.log(`${key} : ${res[key]}`)
  }
}

// id : H6Elb2LBdxc
// joke : What's blue and not very heavy?  Light blue.
// status : 200

Please be aware that for...of loops will iterate over the entire prototype chain, so here we’re using hasOwnProperty to ensure that the property belongs to our res object.

Continue reading Quick Tip: How to Loop Through a JSON Response in JavaScript on SitePoint.


This content originally appeared on SitePoint and was authored by James Hibbard


Print Share Comment Cite Upload Translate Updates
APA

James Hibbard | Sciencx (2021-04-07T16:00:55+00:00) Quick Tip: How to Loop Through a JSON Response in JavaScript. Retrieved from https://www.scien.cx/2021/04/07/quick-tip-how-to-loop-through-a-json-response-in-javascript/

MLA
" » Quick Tip: How to Loop Through a JSON Response in JavaScript." James Hibbard | Sciencx - Wednesday April 7, 2021, https://www.scien.cx/2021/04/07/quick-tip-how-to-loop-through-a-json-response-in-javascript/
HARVARD
James Hibbard | Sciencx Wednesday April 7, 2021 » Quick Tip: How to Loop Through a JSON Response in JavaScript., viewed ,<https://www.scien.cx/2021/04/07/quick-tip-how-to-loop-through-a-json-response-in-javascript/>
VANCOUVER
James Hibbard | Sciencx - » Quick Tip: How to Loop Through a JSON Response in JavaScript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/07/quick-tip-how-to-loop-through-a-json-response-in-javascript/
CHICAGO
" » Quick Tip: How to Loop Through a JSON Response in JavaScript." James Hibbard | Sciencx - Accessed . https://www.scien.cx/2021/04/07/quick-tip-how-to-loop-through-a-json-response-in-javascript/
IEEE
" » Quick Tip: How to Loop Through a JSON Response in JavaScript." James Hibbard | Sciencx [Online]. Available: https://www.scien.cx/2021/04/07/quick-tip-how-to-loop-through-a-json-response-in-javascript/. [Accessed: ]
rf:citation
» Quick Tip: How to Loop Through a JSON Response in JavaScript | James Hibbard | Sciencx | https://www.scien.cx/2021/04/07/quick-tip-how-to-loop-through-a-json-response-in-javascript/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.