合并两个一维数组以创建笛卡尔 table

Question

希望你一切都好

我正在努力在 javascript 中创建一个兼容的数据类型来显示像 table 这样的笛卡尔坐标，我们有一个垂直和一个水平 header。基本上我有 3 个一维数组，其中前两个是 table header，第三个是这两个的组合（基本上是 table 单元格）。

let horizontal_header = [
      { id: 1, name: 'h1' },
      { id: 2, name: 'h2' },
    ];
let vertical_header = [
      { id: 10, name: 'r1' },
      { id: 11, name: 'r2' },
    ];
let cells = [
      { hid: 1, vid: 10, id: 7, name: 'c1' },
      { hid: 1, vid: 11, id: 8, name: 'c2' },
      { hid: 2, vid: 10, id: 9, name: 'c3' },
      { hid: 2, vid: 11, id: 10, name: 'c4' },
    ],

也可能在这种情况下组合可能不存在，我想输入一个空单元格或明显缺少该单元格的内容。

我想创建一个 table 如下所示：

	h1	h2
r1	c1	c3
r2	c2	c4

我将不胜感激任何建议，并非常感谢帮助我解决这个复杂的 use-case 使用 Angular 渲染 table 模板。

谢谢。

Answer 1

我会通过将单元格解析为更 table-render 友好的格式来解决这个问题，如下所示。注意：我使用了 ### 分隔符，您可以使用适合编码练习的任何内容。

let output = {};

cells.forEach(cell => {
  output[cell.hid + '###' + cell.vid] = {
    id: cell.id,
    name: cell.name,
  };
});

之后，您可以使用输出对象渲染 table 单元格，因为您已经知道 hid 和 vid 的组合。您可以 prepare/render 您的 table 行，如下所示。

const rows = [];
for (let i = 0; i < horizontal_header.length; i++) {
  const row = [];
  for (let j = 0; j < vertical_header.length; j++) {
    const hid = horizontal_header[i];
    const vid = vertical_header[j];
    if (output[hid + '###' + vid]) {
      row.push(output[hid + '###' + vid].name);
    } else {
      row.push('-');
    }
  }
  rows.push(row);
}

合并两个一维数组以创建笛卡尔 table

Combine two one dimensional arrays to create a cartesian table

javascript

arrays

angular

cartesian