Back ArrowExplore all topics
technology logo
technology logo

Fetching JSON array data from API using React

share link

by Abdul Rawoof A R dot icon Updated: Jan 24, 2023

Solution Kit Solution Kit  

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

JavaScriptdotLines of Code : 27dotLicense : Strong Copyleft (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.

  1. Install the Node.js and React on your IDE(preferable Visual Studio Code).
  2. Create React Application using npx create-react-app foldername.
  3. cd foldername.
  4. Install npm install axios.
  5. Open the folder in IDE.
  6. Copy the code using "copy" button above and paste it in app.js file(remove the earlier code from app.js).
  7. Import libraries.
  8. Open the terminal from IDE.
  9. 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.

  1. The solution is created in Visual Studio Code 1.73.1.
  2. The solution is tested on node v18.12.1 and npm v8.19.2.
  3. React version-18.2.0.
  4. 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.

Dependent Library

reactby facebook

JavaScript doticonstar image 208188 doticonVersion:v18.2.0doticon
License: Permissive (MIT)

The library for web and native user interfaces

Support
    Quality
      Security
        License
          Reuse

            reactby facebook

            JavaScript doticon star image 208188 doticonVersion:v18.2.0doticon License: Permissive (MIT)

            The library for web and native user interfaces
            Support
              Quality
                Security
                  License
                    Reuse

                      axiosby axios

                      JavaScript doticonstar image 100334 doticonVersion:v1.4.0doticon
                      License: Permissive (MIT)

                      Promise based HTTP client for the browser and node.js

                      Support
                        Quality
                          Security
                            License
                              Reuse

                                axiosby axios

                                JavaScript doticon star image 100334 doticonVersion:v1.4.0doticon License: Permissive (MIT)

                                Promise based HTTP client for the browser and node.js
                                Support
                                  Quality
                                    Security
                                      License
                                        Reuse

                                          You can also search for any libraries on kandi like 'react' and 'axios'.

                                          Support

                                          1. For any support on kandi solution kits, please use the chat
                                          2. For further learning resources, visit the Open Weaver Community learning page.


                                          See similar Kits and Libraries

                                          Open Weaver – Develop Applications Faster with Open Source

                                          kandi

                                          Community and Support

                                          Company

                                          Follow

                                          • © 2023 Open Weaver Inc.