Fetching JSON array data from API using React

by Abdul Rawoof A R Updated: Jan 24, 2023

Fetching JSON array data from an API using React can be used in various contexts where you need to retrieve and display data from an external API in a React application. Some examples might include the following:

a dashboard or reporting tool that makes use of a REST API to present data
An application for data visualization or charting that shows current or past data
An application for social networking or messaging that shows user data
a retail or e-commerce website that displays product information or inventory from an API

You can use the fetch function, a built-in function for making HTTP queries, or a library like Axios to complete the request to fetch data from a JSON array from an API in a React application.

This pre-written code snippet will show you how to fetch data from a JSON file easily and consume it in your React project.

Steps-

Declare a state in React to hold API data
To retrieve API data and store the result, use a JS function
On page load, add useEffect to the fetch API

Here's an example of how you might implement this:

Fig 1: Preview of the output that you will get on running this code from your IDE.

Code

In this solution we're using React and Axios library.

Display data from jsonplaceholder api using react hooks

JavaScriptLines of Code : 27License : CC BY-SA 4.0

function TableList() {
  const [users, setUsers] = useState({ hits: [] });

  useEffect(() => {
    const fetchData = async () => {
      const { data } = await axios(
        "https://jsonplaceholder.typicode.com/users"
      );
      setUsers({ hits: data });
    };
    fetchData();
  }, [setUsers]);

  return (
    <div>
      <ul>
        {users.hits &&
          users.hits.map(item => (
            <li key={item.id}>
              <span>{item.name}</span>
            </li>
          ))}
      </ul>
    </div>
  );
}

Instructions

Follow the steps carefully to get the output easily.

Install the Node.js and React on your IDE(preferable Visual Studio Code).
Create React Application using npx create-react-app foldername.
cd foldername.
Install npm install axios.
Open the folder in IDE.
Copy the code using "copy" button above and paste it in app.js file(remove the earlier code from app.js).
Import libraries.
Open the terminal from IDE.
npm start to run the file.

You can also refer this url 'DEMO' for getting the above output.

I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.

I found this code snippet by searching for 'display data from jsonplaceholder api using react'in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

The solution is created in Visual Studio Code 1.73.1.
The solution is tested on node v18.12.1 and npm v8.19.2.
React version-18.2.0.
Axios library version-0.26.1.

Using this solution, we are able to fetch Json array data from API using React with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to fetch Json array data from API using React.