Open In App

How to parse JSON Data into React Table Component ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

In React parsing JSON Data into React Table Component is a common task to represent data by building UI components.

Prerequisites:

Approach:

We will create react table components and parse a JSON file consisting of objects with id, name, and city associated uniquely. We will use the .map() function to parse each object of the JSON file and return <tr> component with JSON object as table data.

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 display 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.

npm start

Output: This output will be visible on the http://localhost:3000



Last Updated : 30 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads