Question

我有一组数据，想要为它构建一个表。这是来自API的数据

[
  {
    date: "1/11",
    data: [
      {
        camera: "camera 1",
        count: 10
      },
      {
        camera: "camera 2",
        count: 20
      },
      {
        camera: "camera 3",
        count: 30
      }
    ]
  }
]

这是我的jxs

<table className="tg">
      <tr>
        <th />
        {Object.values(data[0].data).map((o, i) => <th>{o.camera}</th>)}
      </tr>
      {data.map((o, i) => {
        return (
          <tr>
            <td>{o.date}</td>
            {o.data.map(o2 => <td>{o2.count}</td>)}
          </tr>
        );
      })}
    </table>

可在此处看到演示https://codesandbox.io/s/pm8qm68onq

但问题是会有更多相机！它不适合20个摄像头，那么如果数据集有18个摄像头，如何拆分另外10个摄像头？如果摄像机超过10，我想创建另一个表，所以前10个摄像机将在第一个表中，第二个表将包含8个摄像机。

Answer 1

您可以尝试在render

之前将数据分割成块

sliceIntoChunks = (data, chunkSize) => {
    let chunks = [];
    for (let i=0; i<data.length; i+=chunkSize) {
        chunks.push(data.slice(i,i+chunkSize));
    }

    return chunks;
}

然后在渲染中为每个块创建一个单独的表：

chunks.map(chunk => (
    <table>
        // and map through chunk to fill current table
        chank.map(camera => (...))
    </table>
))

以下是工作示例：https://jsfiddle.net/csr6zsbo/

Answer 2

您可以浏览每个日期并构建适用表格的新数组。

let newData = [];

for (const dateObj of data) {
  let chunkedData = [];
  while (dateObj.data.length > 0)
    chunkedData.push(dateObj.data.splice(0, 2));
  for (const [index, chunk] of chunkedData.entries()) {
    newData[index] = newData[index] || [];
    newData[index].push({
      date: dateObj.date,
      data: chunk
    })
  }
}

然后，您可以在JSX中循环表。

<div>
  {newData.map((table, i) => {
    return (
      <table className="tg">
        <tr>
          <th />
          {Object.values(table[0].data).map((o, i) => <th>{o.camera}</th>)}
        </tr>
        {table.map((o, i) => {
          return (
            <tr>
              <td>{o.date}</td>
                {o.data.map(o2 => <td>{o2.count}</td>)}
              </tr>
            );
          })}
        </table>
      );
    })
  }
</div>

我已经更新了你的演示，每张桌子最多使用2个摄像头...... https://codesandbox.io/s/jn4w32v759

lodash chunk将映射为两个

2 个答案: