Parse JSON Data into React Table Component

JSON files are used in APIs to transfer data from server to client in the form array. This transferred data needs to be displayed in the user interface, such as in tables or any other components. In this article, we will demonstrate how to display JSON data using a React Table.

Prerequisites

To display a JSON file in React.js, we need to have a basic understanding of the React.js library.

• Basic knowledge of React, useState Hook, and useEffect Hook.
• Ensure Node.js and React are installed on your system.
• Basic understanding of JSON Syntax, HTML table structure, and CSS for styling.

Steps to Display JSON Data in Table

The following section explains the process of displaying a JSON file in React UI step by step, including setting up a React environment, creating a JSON file, fetching JSON data, and creating an HTML structure.

Step 1: Setup React App

To display JSON data in the table, first, you need to setup the react app. You can do this from your Windows PowerShell/macOS terminal or from the VS Code terminal itself. Open VS Code in any folder where you want to create the app and type the following commands in the terminal one by one:

// Create React App
npx create-react-app json-to-table

//move to App folder
cd json-to-table

//start server
npm start

After successfully executing this, a new react environment will be set up at 'http://localhost:3000/'. You can edit App.js and App.css files to make changes in the app.

Step 2: Create JSON Data

In React Apps, we can fetch external JSON files fromtheserver to display on UI. If you don't have any server JSON file, you can create a JSON file inside React app and use it. JSON files are usually placed inside 'public' folder of React JS directory. Following is a sample of a JSON file, you can edit this to add your own data and keep it in '/public/data.json'.

[
    { "id": 1, "name": "John Doe", "age": 28 },
    { "id": 2, "name": "Jane Smith", "age": 32 },
    { "id": 3, "name": "Sam Wilson", "age": 22 }
]

Step 3: Fetch JSON Data

Now the coding part starts. Goto to 'App.js' file in the folder 'json-to-table', clear all the texts in there, and start importing React, useState and useEffect libraries

import React, { useState, useEffect } from "react";

After importing, start the App component by defining a state to store JSON data using the useState hook. Then, by using the useEffect hook, fetch the JSON data from a file or API endpoint. The fetched data is parsed into JSON format and stored in the state.

The 'useEffect' hook ensures the data fetching runs only once when the component mounts. This is because we defined an empty dependency array ('[]').

const App = () => {
    // React state to store JSON data
    const [data, setData] = useState([]);
  
    // Fetch JSON data
    useEffect(() => {
      const fetchData = async () => {
        // Replace with API URL if fetching from a server
        const response = await fetch("/data.json"); 
        const jsonData = await response.json();
        setData(jsonData);
      };
  
      fetchData();
    }, []);

    return()
}  

Step 4: Design Table UI

Now API fetching is over, it's time to design user interface to display data in browser. For this, you can use return statement of App component we defined before. Write a simple HTML table structure, and in body section of table use a javascript map() function to display json data one-by-one. See the code below.

return (
    <div>
      <h1>React Table Example</h1>
      <table border="1" style={{ width: "100%", textAlign: "left" }}>
        <thead>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
          </tr>
        </thead>
        <tbody>
          {data.map((item) => (
            <tr key={item.id}>
              <td>{item.id}</td>
              <td>{item.name}</td>
              <td>{item.age}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
);

Example of Parsing JSON Data to React Table

Here we will combine the above steps to write full code for App.js file.

File - App.js

Here is the full code for the App.js file.

import React, { useState, useEffect } from "react";

const App = () => {
    // React state to store JSON data
    const [data, setData] = useState([]);
  
    // Fetch JSON data
    useEffect(() => {
      const fetchData = async () => {
        // Replace with API URL if fetching from a server
        const response = await fetch("/data.json"); 
        const jsonData = await response.json();
        setData(jsonData);
      };
  
      fetchData();
    }, []);

    return(
        <div>
        <h1>React Table Example</h1>
        <table border="1" style={{ width: "100%", textAlign: "left" }}>
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Age</th>
            </tr>
          </thead>
          <tbody>
            {data.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.name}</td>
                <td>{item.age}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
}  

Output

Following will be output of above code. You can see that JSON file was rendered as a React table.