Combine two one dimensional arrays to create a cartesian table

I hope you are good.

I am struggling to create a compatible data type in javascript to display a cartesian like table where we have a vertical and a horizontal header. Basically I have 3 one dimensional arrays where the first two are the table headers, and the third has the combination of those two by id's (basically the table cells).

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

Also it can happen that a combination might not exists in that case, I want to enter an empty cell or something obvious that this cell is missing.

I want to create a table like below:

I would appreciate any suggestion and be very thankful to help me solve this complex use-case using Angular for rendering the table template.

Thank you.

I'd approach this problem by parsing the cells into more table-render friendly format like below. Note: I used ### separator, you can use anything that suits for coding practice.

let output = {};

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

After that, you can use the output object to render the table cell as you already know the combination of hid and vid. You can prepare/render your table rows as below.

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