reactjs 将数组中的数组读入表物料界面

3vpjnl9f 于 2023-01-02 发布在 React

关注(0)|答案(2)|浏览(126)

因此，我有一个从后端服务的响应数组如下（数组中的数组），我试图找出它如何把它变成表，但在逻辑上有一些问题：

"data": [
            {
                "id": "63ad33c69acfa205d354256b",
                "material": "1000000000",
                "material_name": "SAMPEL",
                "plant": "K111",
                "type": "rm",
                "current_price": 7718,
                "price": []
            },
            {
                "id": "63ad33c69acfa205d354256a",
                "material": "1000000000",
                "material_name": "SAMPEL",
                "plant": "K109",
                "type": "rm",
                "current_price": 7718,
                "price": []
            },
            {
                "id": "63ad33c69acfa205d3542565",
                "material": "1000000000",
                "material_name": "SAMPEL",
                "plant": "K103",
                "type": "rm",
                "current_price": 37259,
                "price": [
                    {
                        "date": "januari",
                        "price": 37258.978184562315
                    },
                    {
                        "date": "februari",
                        "price": 37258.978184562315
                    },
                    {
                        "date": "maret",
                        "price": 37258.978184562315
                    },
                    {
                        "date": "april",
                        "price": 37258.978184562315
                    },
                    {
                        "date": "mei",
                        "price": 37258.978184562315
                    },
                    {
                        "date": "juni",
                        "price": 37258.978184562315
                    },
                    {
                        "date": "juli",
                        "price": 37258.978184562315
                    },
                    {
                        "date": "agustus",
                        "price": 37258.978184562315
                    },
                    {
                        "date": "september",
                        "price": 37258.978184562315
                    },
                    {
                        "date": "oktober",
                        "price": 37258.978184562315
                    },
                    {
                        "date": "november",
                        "price": 37258.978184562315
                    },
                    {
                        "date": "desember",
                        "price": 37258.978184562315
                    }
                ]
            },
    ]

是否可以使用材质UI数据网格或类似的表格库将其转换为如下表格？

在这方面的任何帮助都将是非常有帮助的。

reactjs

来源：https://stackoverflow.com/questions/74959839/read-array-inside-array-into-table-material-ui

2条答案

按热度按时间

um6iljoc1#

https://github.com/ChangeWithCode/datantable
这里我已经实现了，大家可以看看。

<div className="App">
      <table>
        <tr>
          <th rowspan="2">material</th>
          <th rowspan="2">material_name</th>
          <th rowspan="2">plant</th>
          <th rowspan="2">type</th>
          <th rowspan="2">current_price</th>
          <th colspan="12">Price</th>
        </tr>
        <tr>
          <td>januari</td>
          <td>februari</td>
          <td>maret</td>
          <td>april</td>
          <td>mei</td>
          <td>juni</td>
          <td>juli</td>
          <td>agustus</td>
          <td>september</td>
          <td>oktober</td>
          <td>november</td>
          <td>desember</td>
        </tr>
        {object.data.map((item) => {
          return (
            <tr>
              <td>{item.material}</td>
              <td>{item.material_name}</td>
              <td>{item.plant}</td>
              <td>{item.current_price}</td>
              <td>{item.material_name}</td>
              {item.price.map((obj) => {
                return <td>{obj.price}</td>;
              })}
            </tr>
          );
        })}
      </table>
    </div>

赞(0）回复(0）举报 2023-01-02

nmpmafwu2#

下面使用材料表import MaterialTable from 'material-table';求解：

<MaterialTable
        columns={[
          { title: 'material', field: 'material' },
          { title: 'material_name', field: 'material_name' },
          { title: 'plant', field: 'plant' },
          { title: 'type', field: 'type' },
          {
            title: 'current_price',
            field: 'current_price',
          },
          {
            title: 'price',
            field: 'price',
            render: (rowData) => (
              <MaterialTable
                columns={
                  rowData.price.length > 0
                    ? rowData.price.map((el) => ({ title: el.date, field: 'price' }))
                    : [
                        { title: 'januari', field: '' },
                        { title: 'februari', field: '' },
                        { title: 'maret', field: '' },
                        { title: 'april', field: '' },
                        { title: 'mei', field: '' },
                        { title: 'juni', field: '' },
                        { title: 'juli', field: '' },
                        { title: 'agustus', field: '' },
                        { title: 'september', field: '' },
                        { title: 'oktober', field: '' },
                        { title: 'november', field: '' },
                        { title: 'desember', field: '' },
                      ]
                }
                data={rowData.price}
                options={{ toolbar: false }}
              />
            ),
          },
        ]}
        data={data}
        title="Demo Title"
      />

赞(0）回复(0）举报 2023-01-02

我来回答

reactjs 将数组中的数组读入表物料界面

2条答案

相关问题

热门标签

最新问答