tengo datos algo asi
[ { date: '20 Apr', maths: [70, 80.5, 100], science: [25, 20.1, 30] }, { date: '21 Apr', maths: [64, 76, 80], science: [21, 25, 27] }, ];Quiero mostrar los datos dentro de la tabla con etiquetas personalizadas para los temas, por lo que la tabla de salida que quiero es así
date | maths | science | min | val | max | min | val | max 20 Apr | 70 | 80.5| 100 | 25 | 20.1| 30 21 Apr | 64 | 76 | 80 | 21 | 25 | 27El código que he probado se puede encontrar aquí . ¿Es posible hacerlo o hay alguna forma en que deba reestructurar los datos para obtener el resultado deseado?
El marcado predeterminado contiene dos filas de encabezado y el primer encabezado contiene la celda "Fecha".
A continuación, utilizando el primer objeto de marca, cree los encabezados de asunto y los subtítulos "min", "val" y "max".
Luego recorra los sujetos y llene el cuerpo de la mesa.
const marks = [ { date: "20 Apr", maths: [70, 80.5, 100], science: [25, 20.1, 30] }, { date: "21 Apr", maths: [64, 76, 80], science: [21, 25, 27] }, ]; const table = document.getElementById("table"); const tableBody = document.getElementById("table-body"); const tableHeader = document.getElementById("table-header"); const tableSubHeader = document.getElementById("table-sub-header"); if (marks[0]) { const { date, ...subs } = marks[0]; Object.keys(subs).forEach((sub) => { const th = document.createElement("th"); th.textContent = sub; th.setAttribute("colspan", 3); tableHeader.appendChild(th); ["min", "val", "max"].forEach((subheading) => { const th = document.createElement("th"); th.textContent = subheading; th.setAttribute("scope", "col"); tableSubHeader.appendChild(th); }); }); } marks.forEach((mark) => { const tr = document.createElement("tr"); const { date, ...subs } = mark; const th = document.createElement("th"); th.textContent = date; th.setAttribute("scope", "row"); tr.appendChild(th); Object.keys(subs).forEach((sub) => { const [min, val, max] = subs[sub]; tr.innerHTML += `<td>${min}</td><td>${val}</td><td>${max}</td>`; }); tableBody.appendChild(tr); }); body { font-family: arial; } table { table-layout: fixed; width: 100%; border-collapse: collapse; } td, th { padding: 0.5em; border: 1px solid black; } th { text-transform: capitalize; } <table id="table"> <thead> <tr id="table-header"><th rowspan="2" scope="col">Date</th></tr> <tr id="table-sub-header"></tr> </thead> <tbody id="table-body"> </tbody> </table>