如何将 API JSON 响应参数传递给 material ui table

Question

我正在尝试使用 material UI 创建 table 并且我想根据 API 响应数据创建行，但是问题是我得到了具有更多参数的对象数组，但我需要过滤掉一些参数并创建一个 json 对象数组，以便自动构造 table。

实际 JSON 响应：

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

我想减少到

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

这样我就可以将数据传递给我的 material table，如下所示。

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

Answer 1

我想您可能会从下面的代码中得到灵感，只需使用 map 函数并传递所需的列数

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

Answer 2

你的列数组应该是这样的


let columns = [
    {
        title: "Fruit Name", // this will be column name in <th>
        field:"name", // this name should match key in data array
    },
    {
        title: "value", // column heading
        field: "value", //should match with data object
    }
]

const apiResponse = {
    items: [
        {
            name: "banana",
            id: 1,
            value: 10,
        },
        {
            name: "banana",
            id: 1,
            value: 10,
        },
        {
            name: "banana",
            id: 1,
            value: 10,
        },
    ],
};

// format it

const formatedData = apiResponse.items.map((item)=>{
    return {
        name: item.name,
        value: item.value
    }
})

然后，使用它

<MaterialTable
  title="Transaction Summary"
  columns={columns}
  data={formatedData}
/>

Answer 3

为什么不直接再深一层呢？而不是 data={response} 尝试 data={response.items}

如何将 API JSON 响应参数传递给 material ui table

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

javascript

api

json

material-ui

material-table