javascript - lodash block 映射成两个

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

您可以遍历每个日期并构建一个新的适用表格数组。

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>

我已经更新了您的演示，每张 table 最多使用 2 个摄像头来执行此操作... https://codesandbox.io/s/jn4w32v759