React Fetch Json

Posted on  by admin

Requesting a Complex JSON

This tutorial shows how to display json files located in the public folder in react component example. In my application, the employee.json file is located in a location: react/src/employee.json.

This example prints JSON content read from json file located in React application.

In the react component, Import json file as given below.

npx create-react-app FetchAPI

JSOn content is read as a string to employee variablepass employee variable to JSON.stringify to print the json string in browser.

Consuming Data from a Complex JSON Response

We have seen how to print raw json strings read from a local file in react component.

In this example, Read the json data and print it to the table or inline elements. In React Component,.

Import json file with the given path and json content is stored to a variable with the name given in import.

In render, iterate imported variable and use map to iterate data and print the data using javascript expression. map method iterates to iterate data elements. Here is a react component to iterate data. This is another way of reading an external json file, It can be local or external API Url.

Conclusion

You can use Axios or fetch to read from local JSOn or External API calls.

In react component,. Create state property to hold employee json file. Inside componentDidMount() callback method, use fetch to access the json local file and read json content and update state property with json content.

Inside render, read state data, and print to the component.

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.

{JSON.stringify(data, null, 2)}

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.

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.

How to print Raw json content from a local external json file in react component.

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.

Colors Component

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