Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to parse JSON Data into React Table Component ?

  • Last Updated : 29 Sep, 2021

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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :