组合两个一维数组创建一个直角坐标表

Question

希望你一切都好。

我正在努力创建一个兼容的数据类型在javascript中显示笛卡尔表，我们有一个垂直和水平头。基本上，我有3个一维数组，其中前两个是表标题，第三个是这两个id的组合(基本上是表单元格)。

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' },
],

也可能发生组合可能不存在的情况，在这种情况下，我想输入一个空单元格或一些明显的东西，这个单元格缺失。

我想创建一个表，如下所示:

<表类>h1h2tbody><<tr>r1c1c3r2c2c4

我将通过将单元格解析为更适合表格呈现的格式来解决这个问题，如下所示。注意:我使用的是###分隔符，你可以使用任何适合编码实践的分隔符。

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

之后，您可以使用输出对象来呈现表格单元格，因为您已经知道hid和vid的组合。您可以按如下方式准备/呈现表行。

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);
}