Espero que estés bien.
Estoy luchando por crear un tipo de datos compatible en javascript para mostrar una tabla cartesiana donde tenemos un encabezado vertical y otro horizontal. Básicamente, tengo 3 arreglos unidimensionales donde los dos primeros son los encabezados de la tabla, y el tercero tiene la combinación de esos dos por ID (básicamente las celdas de la tabla).
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' }, ],También puede suceder que una combinación no exista en ese caso, quiero ingresar una celda vacía o algo obvio que falta en esta celda.
Quiero crear una tabla como la siguiente:
| h1 | h2 | |
|---|---|---|
| r1 | c1 | c3 |
| r2 | c2 | c4 |
Agradecería cualquier sugerencia y estaría muy agradecido de ayudarme a resolver este caso de uso complejo usando Angular para representar la plantilla de la tabla.
Gracias.
Abordaría este problema analizando las celdas en un formato más amigable para la representación de tablas como se muestra a continuación. Nota: usé el separador ### , puede usar cualquier cosa que se adapte a la práctica de codificación.
let output = {}; cells.forEach(cell => { output[cell.hid + '###' + cell.vid] = { id: cell.id, name: cell.name, }; }); Después de eso, puede usar el objeto de salida para representar la celda de la tabla, ya que ya conoce la combinación de hid y vid . Puede preparar/renderizar las filas de su tabla como se muestra a continuación.
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); }