Convert json array to 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
     }}
 />

You can do data.data = Object.values(data.data)

Rajesh Dixit
– Rajesh Dixit

2021-01-19 12:00:38 +00:00
Commented Jan 19, 2021 at 12:00 — Rajesh Dixit
– Rajesh Dixit, Commented Jan 19, 2021 at 12:00

b3hr4d · Accepted Answer · 2021-01-19 12:03:12Z

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

answered Jan 19, 2021 at 12:03

b3hr4d

4,6381 gold badge13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Convert json array to object - Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related