What I'm trying to do is show the data I get from an API (did using NodeJs) and display it in a table using the material-table library using React Js. My problem is when making the data I get from the API compatible with the json format that the table understands. I think the problem is because the format the table understands is in an array, but I still don't understand how to do that.
In this JSON format it does not display any data in the table:
{
"data": {
"username01": {
"name": "john",
"adress": "street sun, 124",
"status": "ok"
},
"username02": {
"name": "joseph",
"adress": "street abc, 124",
"status": "ok"
}
}
}
The JSON format that I tested and displays in the table normally:
{
"data": [
{
"name": "john",
"adress": "street sun, 124",
"status": "ok"
},
{
"name": "john",
"adress": "street sun, 124",
"status": "ok"
}
]
}
ReactJs Frontend:
const columns = [
{ title: 'Name', field: 'name' },
{ title: 'Adress', field: 'adress' },
{ title: 'Status', field: 'status' }
];
const getdata = async () => {
await api.post("/data")
.then(response => {
setData(response.data.data);
}).catch(error => {
console.log(error);
})
}
<MaterialTable
columns={columns}
data={data}
title="Lista de entregadores"
options={{
actionsColumnIndex: -1,
exportButton: true
}}
/>
Try this:
setData(Object.values(response.data.data));
or in component:
<MaterialTable
columns={columns}
data={Object.values(data)}
title="Lista de entregadores"
options={{
actionsColumnIndex: -1,
exportButton: true
}}
/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.