angular - 结合两个一维 arrays 创建一个 cartesian table

我希望你一切安好。

我正在努力在 javascript 中创建兼容的数据类型以显示像 table 这样的 cartesian ,其中我们有一个垂直和一个水平标题。基本上我有 3 个一维 arrays ,其中前两个是 table 标题,第三个通过 id 将这两个组合在一起(基本上是 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

我将不胜感激任何建议,并非常感谢帮助我解决这个复杂的用例,使用 Angular 来呈现 table 模板。

谢谢你。

回答1

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

let output = {};

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

之后,您可以使用输出对象来渲染 table 单元格,因为您已经知道 hidvid 的组合。您可以准备/呈现您的 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);
}

相似文章

svg - 缩放另一个 svg 内的 svg 元素

我想在嵌套在另一个svg中的悬停3svgs上放大。这3个svgs是在此地址的第一张图中可见的行星:http://68.183.74.150:3000/planet。因此,总而言之,代码如下所示:<sv...

最新文章