Fetching Data

You may work in a speedy development environment by creating API mockups for local testing and development. Copying the JSON data to a local file in your project directory and making retrieve or GET calls to that file instead of the real database is one technique to construct an API mockup. There are a variety of issues that might occur while loading data from a JSON file because getting data from an external source is still an asynchronous activity. This tutorial will show you how to use React to fetch data from a JSON file and consume it on the frontend.

Create a local JSON file named data.json in the public directory of a blank Create React App project. Your React component's Fetch API requests always look for files or other relevant assets in this public directory. You must manually place your assets in this directory because Create-React-App does not do it automatically during compilation.

After that, add some dummy JSON data to this file. The JSON data in the sample below was generated using JSON Generator for demonstration purposes. If you are using your own JSON, ensure that it is correctly formatted.

Fetch API

The next step is to get this information in the correct format. Create a function getData() that uses JavaScript's fetch API to fetch local JSON and call it from inside useEffect, as seen below.

 const getData=()=>{
    fetch('data.json'
    ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    }
    )
      .then(function(response){
        console.log(response)
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
      });
  }
  useEffect(()=>{
    getData()
  },[])

'data.json' or './data.json' should be the path to your JSON file. When trying to access that site via other relative paths, you can get a 404 error. To tell your client that you're trying to access and accept a JSON resource from a server, you'll also need to pass in some headers identifying the Content-Type and Accept as application/json.

Loading Data

To store this data and render it on the DOM, use the useState hook to create a state.

const [data,setData]=useState([]);

const getData=()=>{
    fetch('data.json'
    ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    }
    )
      .then(function(response){
        console.log(response)
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
        setData(myJson)
      });
  }

Before rendering or loading this data, add suitable checks to your component's return statement, depending on the structure of your JSON. When the component is mounted on the DOM, it makes a GET call to your JSON resource. Your return statement, however, is executed before the API call is made because it is an asynchronous process. Re-rendering the component updates the DOM with JSON data contained inside the state because you're updating the state after retrieving the required data. Because the JSON used here is an array of objects, the important check would be to see if the state exists and, if so, if it has a length greater than zero, as seen below.

 return (
    <div className="App">
     {
       data && data.length>0 && data.map((item)=><p>{item.about}</p>)
     }
    </div>
 );

Conclusion: So there you have it, your journey into the React realm. We've started with Fetching Data in React to get you familiar with why you'd use in React and what you can do with it.