Search code examples
javascriptjsonapimaterial-uimaterial-table

how to pass the API JSON response parameters to material ui table


I'm trying to create the a table using the material UI and i would like to create the rows based on the API response data but the problem is i get array of object with more paramters but i need to filter out few paramters and create a array of json objected so that table gets constructed automatically.

Actual JSON response:

{
    "items": [{
            "name": "banana",
            "id": 1,
            "value": 10
        },
        {
            "name": "banana",
            "id": 1,
            "value": 10
        },
        {
            "name": "banana",
            "id": 1,
            "value": 10
        }
    ]
}

I would like to reduce it to

[{
            "name": "banana",
            "value": 10
        },
        {
            "name": "banana",
            "value": 10
        },
        {
            "name": "banana",
            "value": 10
        }]

so that i can pass the data to my material table like below.

<MaterialTable
      title="Transaction Summary"
      columns={state.columns}
      data={state.data} *array of object will be passed here*
    />

Solution

  • I think you may get the idea from below code just use map function and pass the desire number of columns

    <MaterialTable
              title="Transaction Summary"
              columns={state.columns}
              data={state.data.map( item => key={item.key}>{item.value} )}
            />