How to display JSON file of below data in front end using Reactjs?

Question

below data can be converted into object list(ElementsClassLst) & below code converted into JSON.

var jsonElementClassList3 = JsonConvert.SerializeObject(ElementsClassLst);

Section	Subsection	Question	Answers
Capacity	Private Sector	Position	Chairman / director / Corporate management member
			Middle management
			Junior Management / Executive level
			Non executive level

Tuhin Paul · Answer

Assuming the JSON data is in a file named data.json in the public folder of your ReactJS application, you can fetch it in a component as follows: import React, { useState, useEffect } from 'react'; function MyComponent() { const [data, setData] = useState(null); useEffect(() => { fetch('/data.json') .then(response => response.json()) .then(json => setData(json)); }, []); if (!data) { return Loading... ; } return ( Section Subsection Question Answers {data.map((row, index) => ( {row.Section} {row.Subsection} {row.Question} {row.Answers} ))} ); } export default MyComponent; we define a state variable data using the useState() hook to store the JSON data after it's retrieved. We use the useEffect() hook with an empty dependency array to fetch the data only once when the component mounts. We render a loading message if the data is not yet available. Once the data is available, we use the map() method to render each row of the table using JSX. We extract the values of each column from the row object and use them to populate the table cells. Make sure that the data.json file is served correctly by your web server and that the path in the fetch() method matches the location of the file.

Tuhin Paul · Answer

You can use the fetch() method to retrieve the data from the server and then use the JSON.parse() method to convert it to a JavaScript object.

How to display JSON file of below data in front end using Reactjs?

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (2)