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.
