This is a simple question. How to display the data in the table from json file?
table.js
componentDidMount() {
fetch('/apps.json')
.then(rsp => rsp.json())
.then(data => data.map(item => {
return console.log(item);
}));
}
<tbody>
{/* { data.map(item => {
return(
<tr>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.dateCreated}</td>
</tr>
);
})} */}
</tbody>
// Set appsData state
componentDidMount() {
fetch("/apps.json")
.then((rsp) => rsp.json())
.then((rsp) => {
this.setState({
appsData: rsp
});
});
// Map the data
{ this.state.appsData.map(item => {
return(
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.url}</td>
<td>{item.devOpsUrl}</td>
<td>{item.techStack}</td>
<td>{item.dateCreated}</td>
</tr>
);
})}
If you're interested in hooks, you can use the useState and useEffect hooks.
import React, { useState, useEffect } from "react";
const Apps = () => {
const [data, setData] = useState([])
useEffect(() => {
fetch("/apps.json")
.then((rsp) => rsp.json())
.then((data) => setData(data))
}, [])
return (
<div>
<h4>Apps List</h4>
<table border={1} cellPadding={5}>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>URL</th>
<th>DevOps URL</th>
<th>Tech Stack</th>
<th>Date Created</th>
</tr>
</thead>
<tbody>
{ data.map(item => (
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.url}</td>
<td>{item.devOpsUrl}</td>
<td>{item.techStack}</td>
<td>{item.dateCreated}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default Apps
References:
Using the State Hook
Using the Effect Hook
You can work with react-data-table-component its very simple to use this is a simple :
import React from 'react';
import DataTable from 'react-data-table-component';
const data= [{"id":1,"name":"Alphazap","url":"http://1und1.de","devOpsUrl":"https://webs.com/nunc/commodo/placerat/praesent/blandit/nam/nulla.jsp","techStack":"sit amet cursus id turpis integer aliquet massa id lobortis convallis tortor risus dapibus","dateCreated":"05.06.2020"}]
const columns = [
// your columns here
];
return (
<>
<DataTable
title="my table"
columns={columns}
data={data}
/>
</>
);
};
After you have converted the response received from the server into JSON, you can then set the JSON formatted response in your state variable using the setState() method.
componentDidMount() {
fetch("/apps.json")
.then((rsp) => rsp.json())
.then((rsp) => {
this.setState({
appsData: rsp
});
});
}
In your JSX code, you can uncomment the code you have written with a small change that you need to add a unique key prop to each item in your list. This helps React identify which elements have really changed so as to render them again.
{ data.map(item => {
return(
<tr key={item.id}>
<td>{item.id}</td>
<td>{item.name}</td>
<td>{item.url}</td>
<td>{item.devOpsUrl}</td>
<td>{item.techStack}</td>
<td>{item.dateCreated}</td>
</tr>
);
})}
Read more:
