Iterate over JSON with Root Node in JavaScript
Introduction
A large portion of a frontend developer's work includes working with JSON responses when integrating backend APIs in an app. JSON responses are often complex and difficult to comprehend in one go. However, their complex structure is justified in terms of demystifying the data returned to the frontend. Thus, you may receive a JSON response with a root node indicating what the corresponding object is about.
In this guide, you'll learn how to identify and understand JSON responses with root nodes and eventually iterate over them using JavaScript in React.
JSON With Root Node
Consider the following JSON file. You can find it at the dummy-json API documentation.
The below JSON file contains four nodes or properties: users, images, coordinates, and price. All the nodes are at the same level in the node tree, and you can verify this by accessing these properties. For instance, if you store this response in an object called resp, you can access the users and image properties like resp.users and resp.images. Hence, the given JSON does not contain a root node.
1{
2 "users": [
3 {
4 "id": 0,
5 "name": "Adam Carter",
6 "work": "Unilogic",
7 "email": "[email protected]",
8 "dob": "1978",
9 "address": "83 Warner Street",
10 "city": "Boston",
11 "optedin": true
12 },
13 {
14 "id": 1,
15 "name": "Leanne Brier",
16 "work": "Connic",
17 "email": "[email protected]",
18 "dob": "1987",
19 "address": "9 Coleman Avenue",
20 "city": "Toronto",
21 "optedin": false
22 }
23 ],
24 "images": [
25 "img0.png",
26 "img1.png",
27 "img2.png"
28 ],
29 "coordinates": {
30 "x": 35.12,
31 "y": -21.49
32 },
33 "price": "$59,395"
34}Let's modify the above JSON response so that it contains a root node. This means that to access these properties, you'll have to go a level down from how you were accessing it before.
1"data":{
2 "users": [
3 {
4 "id": 0,
5 "name": "Adam Carter",
6 "work": "Unilogic",
7 "email": "[email protected]",
8 "dob": "1978",
9 "address": "83 Warner Street",
10 "city": "Boston",
11 "optedin": true
12 },
13 {
14 "id": 1,
15 "name": "Leanne Brier",
16 "work": "Connic",
17 "email": "[email protected]",
18 "dob": "1987",
19 "address": "9 Coleman Avenue",
20 "city": "Toronto",
21 "optedin": false
22 }
23 ],
24 "images": [
25 "img0.png",
26 "img1.png",
27 "img2.png"
28 ],
29 "coordinates": {
30 "x": 35.12,
31 "y": -21.49
32 },
33 "price": "$59,395"
34 }Now your JSON response has a root node called data, and your properties will be accessed as resp.data.users, resp.data.images, and so on. The need for structuring JSON responses in this way is to understand what the entire object corresponds to. In a real-life scenario, you can imagine this response corresponding to sellers who are selling their products on an e-commerce website. The root node can then be sellers_product_1355, giving an idea of what the data is about. Now that you know all about JSON with root nodes, let's look at how you can iterate over it using JavaScript in React
.
Iterating Over JSON With Root Node
Inside your React app, create a data.js file and export the above response as an object.
1export default {
2"data":{
3 ...
4 }
5}Now you can import this object as a regular JavaScript object as if you were getting it from a backend API. Any JSON property will be accessed by first accessing the root node. Have a look a the following console logs to understand how these properties can be accessed
1import React from 'react';
2import response from './data';
3
4function App() {
5 console.log('users: ',response.data.users);
6 console.log('images: ',response.data.images);
7 console.log('images: ',response.data.coordinates);
8 console.log('price: ',response.data.price);
9 return (
10 <div className="App">
11
12 </div>
13 );
14}
15
16export default App;Note that both images and users are arrays, so you can use the map() method in JSX to iterate over them as shown below. You can also use regular for loops.
1import React from 'react';
2import logo from './logo.svg';
3import './App.css';
4import response from './data';
5
6function App() {
7 console.log('users: ',response.data.users);
8 console.log('images: ',response.data.images);
9 console.log('images: ',response.data.coordinates);
10 console.log('images: ',response.data.price);
11 return (
12 <div className="App">
13 {
14 response.data.users.map(user=><><h1 key={user.id}>{user.name}</h1></>)
15 }
16 {
17 response.data.images.map(img=><><h1>{img}</h1></>)
18 }
19 </div>
20 );
21}
22
23export default App;For the remaining properties, separately render them based on their data types, as shown below
1...
2 <p>{response.data.coordinates.x } {response.data.coordinates.y }</p>
3 <p><strong>{response.data.price}</strong></p>
4...Conclusion
Root nodes in JSON give you a better understanding of the response object. In cases where JSON responses contain similar data types, you can combine them into one and iterate through all of them together, but it largely depends on how your database is set up. The generalized approach is to access them through the root node individually and iterate over only those properties that can be iterated over (such as arrays and strings), as shown in this guide.