How to parse JSON Data into React Table Component ?

React JS is a front-end library used to build UI components. In this article, we will learn how to parse JSON Data into React Table Component.  

Approach: We will parse a Json file consisting of objects with id, name and city associated uniquely. Now we will parse this data and display it in a table created by react. We will use .map() function to parse each object of  JSON file and return <tr> component with JSON object as table data.

Below is the step-by-step implementation of the above approach.

Step 1: Open the terminal and create 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: It will look like the following.

• Make a folder named ‘MyPractice’ in src

Step 3: Creating a JSON Object File here and Save it as data.json. In this file, we will create multiple objects with id, name, and city.

File Name: 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 4: Create JsonDataDisplay Component and import data from data.json file in this. In this component, we will map each object from JSON file and pass it to function. This function will return a table-row with object_data as table-data

File Name: GeekTable.jsx

Javascript

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;

Step 5: Export this component in App.js. This will render component on the localhost

File Name: App.js

Javascript

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

    </div>
  );
}

export default App;

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

npm start

Output: