Scribd
Upload
5 views

Js 4

js 4

Uploaded by

Aditya Raj
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Js 4

js 4

Uploaded by

Aditya Raj
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Name:-Aditya Raj Roll No: 11212714 Sec on: A1

PRACTICAL – 4
Aim:- Create a JSON file which has student details:- registra on, name,
department and display the same in react component using the map func on.
Theory:
JSON :- JSON (JavaScript Object Notation) is a lightweight data format that is
commonly used in React JS projects. JSON is widely used for data storage, data
transmission, and configuration in web applications.
Map() :-
 The map() in React function is used to iterate through arrays and manipulates
or modify data elements.
 The map() in React method creates a new array by calling the provided
function on each element of the calling array.
 The map() in React function does not modify the original array.
 The map() in React method is most commonly used to render a list of data into
the DOM.
File Structure:

JSON data:
Student.json
[
{
"Registration_No": 11212714,
"Name": "Aditya Raj",
"Department": "computer science"
},
{
"Registration_No": 11212506,
"Name": "Snehit Garg",
"Department": "computer science"
1
MMEC
Name:-Aditya Raj Roll No: 11212714 Sec on: A1
},
{
"Registration_No": 11212535,
"Name": "Rinki",
"Department": "computer science"
},
{
"Registration_No": 11212529,
"Name": "Gautam",
"Department": "computer science"
},
{
"Registration_No": 11212781,
"Name": "Babarangi",
"Department": "computer science"
},
{
"Registration_No": 11212782,
"Name": "Ankit Raj",
"Department": "computer science"
},
{
"Registration_No": 11212505,
"Name": "Punit",
"Department": "computer science"
},
{
"Registration_No": 11212507,
"Name": "Akshat",
"Department": "computer science"
},
{
"Registration_No": 11212520,
"Name": "Vansh",
"Department": "computer science"
},
{
"Registration_No": 11212715,
"Name": "Arun",
"Department": "computer science"
}
2
MMEC
Name:-Aditya Raj Roll No: 11212714 Sec on: A1
]
Code:
Jsondata.jsx
import React from 'react'
import student from './Student.json'
function Jsondata() {
const displaydata=student.map((info)=>{
return (
<tr>
<td>{info.registration_no}</td>
<td>{info.name}</td>
<td>{info.dept}</td>
</tr>
);
})
return (
<>
<table>
<thead>
<tr>
<th>Registration_No</th>
<th>Name</th>
<th>Department</th>
</tr>
</thead>
<tbody>
{displaydata}
</tbody>
</table>
</>
)
}

export default Jsondata;

3
MMEC
Name:-Aditya Raj Roll No: 11212714 Sec on: A1

index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Jsondata from './Jsondata';

const root = ReactDOM.createRoot(document.getElementById('root'));


root.render(
<Jsondata/>
);

OUTPUT:-

4
MMEC

You might also like