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.
Key Takeaways
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 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;
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.
The Fetch API is a Promise-based API, which enables a cleaner, more concise syntax and helps keep you out of callback hell. It provides a fetch()
method defined on the window
object, which you can use to perform requests. This method returns a Promise that you can use to retrieve the response of the request.
Let’s rewrite our previous example to use it:
(async () => {
const res = await fetch('https://icanhazdadjoke.com/', {
headers: { Accept: 'application/json' },
});
const json = await res.json();
Object.entries(json).forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});
})();
// id: 2wkykjyIYDd
// joke: What did the traffic light say to the car as it passed? "Don't look I'm changing!"
// status: 200
The Fetch API returns a response stream. This is not JSON, so instead of trying to call JSON.parse()
on it, we’ll need to use its response.json() function. This returns a Promise that resolves with the result of parsing the response’s body text as JSON.
Dealing with an Array
As mentioned at the top of the article, an ordered list of values (aka an array), is valid JSON, so before we finish, let’s examine how to deal with such a response.
For the final example, we’ll use GitHub’s REST API to get a list of a user’s repositories:
(async () => {
async function getRepos(username) {
const url = `https://api.github.com/users/${username}/repos`;
const response = await fetch(url);
const repositories = await response.json();
return repositories;
}
const repos = await getRepos('jameshibbard');
console.log(repos);
})();
// Array(30) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
As you can see, the API has returned an array of objects. To access each of the individual objects, we can use a regular forEach
method:
repos.forEach((repo) => {
console.log(`{$repo.name} has ${repo.stargazers_count} stars`);
});
// Advanced-React has 0 stars
// angular2-education has 0 stars
// aurelia-reddit-client has 3 stars
// authentication-with-devise-and-cancancan has 20 stars
// ...
Alternatively, you can of course use any of the methods discussed above to loop through all of the object’s properties and log them to the console:
repos.forEach((repo) => {
Object.entries(repo).forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});
});
// name: Advanced-React
// full_name: jameshibbard/Advanced-React
// private: false
// ...
Conclusion
In this quick tip, we’ve looked at what JSON is. I’ve demonstrated how to parse a JSON response from a server into a native data structure (such as an array or an object), and how to loop through such a structure, so as to access the data it contains.
If you’re having trouble with anything presented in this article, why not stop by SitePoint’s Forums, where there are plenty of friendly people to help you out.
FAQs on How to Loop Through a JSON Response in JavaScript
How Can I Loop Through a JSON Response in JavaScript?
Looping through a JSON response in JavaScript can be done using various methods, but the most common one is using the ‘for…in’ loop. This loop allows you to access each property in an object. Here’s a simple example:let response = {
"name": "John",
"age": 30,
"city": "New York"
};
for (let key in response) {
console.log(key + ": " + response[key]);
}
In this example, the loop will iterate over each property in the ‘response’ object and print out the property name and its value.
What Is the Difference Between JSON and JavaScript Objects?
JSON (JavaScript Object Notation) is a data format that has a syntax for storing and exchanging data. JSON is text, and we can convert any JavaScript object into JSON, and send JSON to the server. We can also convert any JSON received from the server into JavaScript objects. This way we can work with the data as JavaScript objects, with no complicated parsing and translations.
How Can I Parse a JSON Response in JavaScript?
Parsing a JSON response in JavaScript can be done using the JSON.parse() method. This method takes a JSON string and transforms it into a JavaScript object. Here’s an example:let response = '{"name":"John", "age":30, "city":"New York"}';
let obj = JSON.parse(response);
console.log(obj.name);
In this example, the JSON.parse() method is used to convert the JSON string into a JavaScript object.
How Can I Use the forEach Method to Loop Through a JSON Response?
The forEach() method can be used to loop through an array of JSON objects. Here’s an example:let response = [
{"name":"John", "age":30, "city":"New York"},
{"name":"Jane", "age":20, "city":"Chicago"}
];
response.forEach(function(item) {
console.log(item.name);
});
In this example, the forEach() method is used to loop through each item in the ‘response’ array and print out the ‘name’ property.
How Can I Access a Specific Property in a JSON Response?
Accessing a specific property in a JSON response can be done using dot notation or bracket notation. Here’s an example:let response = {"name":"John", "age":30, "city":"New York"};
console.log(response.name); // using dot notation
console.log(response["name"]); // using bracket notation
In this example, the ‘name’ property is accessed using both dot notation and bracket notation.
How can I handle nested JSON objects in JavaScript?
Handling nested JSON objects in JavaScript can be done using nested for…in loops. Here’s an example:let response = {
"name": "John",
"age": 30,
"address": {
"street": "123 Main St",
"city": "New York"
}
};
for (let key in response) {
if (typeof response[key] === 'object') {
for (let subKey in response[key]) {
console.log(subKey + ": " + response[key][subKey]);
}
} else {
console.log(key + ": " + response[key]);
}
}
In this example, the outer loop iterates over each property in the ‘response’ object. If the property value is an object (i.e., a nested JSON object), the inner loop iterates over each property in the nested object.
How Can I Convert a JavaScript Object into a JSON String?
Converting a JavaScript object into a JSON string can be done using the JSON.stringify() method. Here’s an example:let obj = {"name":"John", "age":30, "city":"New York"};
let jsonString = JSON.stringify(obj);
console.log(jsonString);
In this example, the JSON.stringify() method is used to convert the ‘obj’ object into a JSON string.
How Can I Handle JSON Arrays in JavaScript?
Handling JSON arrays in JavaScript can be done using array methods like forEach(), map(), filter(), etc. Here’s an example using the forEach() method:let response = [
{"name":"John", "age":30, "city":"New York"},
{"name":"Jane", "age":20, "city":"Chicago"}
];
response.forEach(function(item) {
console.log(item.name);
});
In this example, the forEach() method is used to loop through each item in the ‘response’ array and print out the ‘name’ property.
How Can I Filter a JSON Response in JavaScript?
Filtering a JSON response in JavaScript can be done using the filter() method. Here’s an example:let response = [
{"name":"John", "age":30, "city":"New York"},
{"name":"Jane", "age":20, "city":"Chicago"}
];
let filteredResponse = response.filter(function(item) {
return item.age > 25;
});
console.log(filteredResponse);
In this example, the filter() method is used to create a new array that includes only the items where the ‘age’ property is greater than 25.
How Can I Sort a JSON Response in JavaScript?
Sorting a JSON response in JavaScript can be done using the sort() method. Here’s an example:let response = [
{"name":"John", "age":30, "city":"New York"},
{"name":"Jane", "age":20, "city":"Chicago"}
];
response.sort(function(a, b) {
return a.age - b.age;
});
console.log(response);
In this example, the sort() method is used to sort the items in the ‘response’ array by the ‘age’ property.
Network admin, freelance web developer and editor at SitePoint.