React Json Array

Posted on  by admin
One of the key tasks of a frontend developer is integrating backend APIs into apps.

Modern APIs widely follow the RESTful architecture where an endpoint receives a request from the client and sends back a response irrespective of the client.

GET APIs or endpoints that are used only to retrieve data from a server using a popular data format called JSON (JavaScript Object Notation).

They often send back a complex JSON object with deeply nested objects and arrays.

This guide aims to explain how you can retrieve relevant information from a complex JSON object in your React app and store that data in the state, or pass it down as props when required.

The example in this guide will build a small React app that consumes the endpoint https://reqres.in/api/unknown by breaking down a complex JSON object into simple objects and arrays.

The entire data set is fetched and stored by a parent component and then broken down into two separate objects.

One object is passed as props to a child component that shows the information contained in that object to the user.
Install Axios, a third party library that goes well with React for making HTTP calls.
1

Create two simple components to get started. First, the Colors component:. Now create the Home component and render the Colors component inside it as demonstrated below.

Consider the following code for making a GET request to a REST API.

The JSON response as it is contains a lot of unnecessary information (such as config, headers, etc.), and returns all relevant information inside a data object. This data object contains the actual data that the user might be interested in.

A good and simple practice to analyze and break down complex JSON responses is using console statements to see the properties attached to an object as demonstrated below.

The data object contains two relevant objects attached as properties: data and ad.

The ad object is supposed to be consumed by the Home component for displaying the name of the company and its motto.

The data object is an array of objects where each object contains details about a particular color.

First, create some state variables to store the entire data.

The state variable Data stores details that have to be shown on the Home component, and colorsData stores the details that have to be shown on the Colors component.

Populate these variables with data inside the .then() method of the API call.
4

Output data from companyData inside the Home component:. Let's now wrap up the guide, with complete code as discussed above.

JSON.parse()

The final code for the Home component is demonstrated below. Finally, using a component loop, output the information about colors inside the Colors component.

Dealing with complex JSON responses is a necessity today to React developers.
1

It can be tedious at times but isn't a difficult task altogether if done wisely by breaking down large pieces of data into smaller chunks.

This can be done by properly observing how an endpoint is giving back data to the frontend, especially the name of the keys, the type of values returned, etc.

Working with complex JSON responses also improves your debugging skills.

JS References