How to parse JSON Data into React Table Component ? - GeeksforGeeks

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:
akshitsaxenaa09
Blogathon-2021
React-Questions
Blogathon
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Create a Table With Multiple Foreign Keys in SQL?
How to Import JSON Data into SQL Server?
Stratified Sampling in Pandas
How to Install Tkinter in Windows?
Python program to convert XML to Dictionary
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
How to pass data from child component to its parent in ReactJS ?
How to pass data from one component to other component in ReactJS ?
ReactJS Functional Components