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

While bringing information from a distant worker, the worker's reaction will regularly be in JSON design. In this speedy tip, I'll show how you can utilize JavaScript to parse the worker's reaction, to get to the information 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.

Use Object.entries, Object.values or Object.entries
An alternative approach to the above is to use one of Object.keys(), Object.values() or Object.entries(). These will return an array which we can then iterate over.

Let’s take a look at using Object.entries. This returns an array of the key/value pairs of the object we pass it:

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

Object.entries(res).forEach((entry) => {
  const [key, value] = entry;
  console.log(`${key}: ${value}`);
});

// id: SvzIBAQS0Dd 
// joke: What did the pirate say on his 80th birthday? Aye Matey!
// status: 200

Note that the const [key, value] = entry; the syntax is an example of array destructuring that was introduced to the language in ES2015.

This is much more concise, avoids the aforementioned prototype problem, and is my preferred method of looping through a JSON response.

Using the Fetch API
While the method above using the XMLHttpRequest object works just fine, it can get unwieldy pretty quickly. We can do better.