How to parse JSON Data into React Table Component ?
Last Updated :
30 Nov, 2023
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
import JsonDataDisplay from "./MyPractice/GeekTable" ;
function App() {
return (
<div className= "App" >
<h1>Hello Geeks!!!</h1>
<JsonDataDisplay />
</div>
);
}
export default App;
|
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;
|
Javascript
[
{
"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
Share your thoughts in the comments
Please Login to comment...