将 json 数组转换为 object - Javascript

Question

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
     }}
 />

Answer 1

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
     }}
 />