How to parse JSON Data into React Table Component ?

Last Updated : 10 Oct, 2024

In React parsing JSON Data into React Table Component is a common task to represent and structure data. We can render the JSON data into a table dynamically using the array map.

Prerequisites:

Approach

To render JSON data in React Table we will be using the JavaScript array map method. Using the map function we will iterate each object of the JSON file and return it inside tr to render the complete table. Our ReactJS Course covers techniques for parsing JSON and integrating it into React table components, enhancing your data presentation skills.

Steps to Create a React Application

Step 1: Open the terminal and create a react app.

npx create-react-app my-first-app

Step 2: Change the directory to that folder by executing the command.

cd my-first-app

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: This example demonstrates parsing json data from data.json file and render it as a table on the UI.

JavaScript

// Filename - App.js

import JsonDataDisplay from "./MyPractice/GeekTable";
function App() {
    return (
        <div className="App">
            <h1>Hello Geeks!!!</h1>
            <JsonDataDisplay />
        </div>
    );
}

export default App;

JavaScript

// Filename - /MyPractice/GeekTable.jsx

import React from 'react'
import JsonData from './data.json'
 function JsonDataDisplay(){
    const DisplayData=JsonData.map(
        (info)=>{
            return(
                <tr>
                    <td>{info.id}</td>
                    <td>{info.name}</td>
                    <td>{info.city}</td>
                </tr>
            )
        }
    )

    return(
        <div>
            <table class="table table-striped">
                <thead>
                    <tr>
                    <th>Sr.NO</th>
                    <th>Name</th>
                    <th>City</th>
                    </tr>
                </thead>
                <tbody>
                    {DisplayData}
                </tbody>
            </table>
        </div>
    )
 }

 export default JsonDataDisplay;

JavaScript

// File Name: /MyPractice/data.json
[
    {
        "id":1,
        "name":"Akshit",
        "city":"Moradabad"
    },   
    {
        "id":2,
        "name":"Nikita",
        "city":"Lucknow"
    },
    {
        "id":3,
        "name":"Deeksha",
        "city":"Noida"
    },
    {
        "id":4,
        "name":"Ritesh",
        "city":"Delhi"
    },
    {
        "id":5,
        "name":"Somya",
        "city":"Gurugram"
    },
    {
        "id":6,
        "name":"Eshika",
        "city":"Mumbai"
    },
    {
        "id":7,
        "name":"Kalpana",
        "city":"Rampur"
    },
    {
        "id":8,
        "name":"Parul",
        "city":"Chandigarh"
    },
    {
        "id":9,
        "name":"Himani",
        "city":"Dehradun"
    }
]

Step to run the application: Open the terminal and type the following command.