Recibo datos como una matriz de objetos en JS. Cada objeto tiene un valor month y quiero mostrar datos con grupos según el mes. Ejemplo:
data: [ {id: 0001,month:2,desc:'objectone'}, {id: 0001,month:4,desc:'objecttwo'}, {id: 0001,month:4,desc:'objectthree'}, {id: 0001,month:4,desc:'objectfour'}, {id: 0001,month:5,desc:'objectfive'}, {id: 0001,month:5,desc:'objectsix'} ]Ahora quiero mostrarlo así:
<h1>Month {month}</h1> <p>{desc}</p>Objeto del mes 2
Mes 4 objeto doso objeto tres objeto cuatro
Mes 5 objeto cinco objetos seis
He usado reduce para agruparlo por el valor, pero aún tengo problemas para mapearlo para mostrarlo como se describe anteriormente. Después de reducir, obtengo un objeto que contiene una matriz de objetos:
data: { 1:(1) [{...}], 2:(3) [{...}], 3:(2) [{...}] }Gracias
Una vez que haya agrupado los datos, puede recorrerlos usando Object.entries y luego, dentro del ciclo, cree el encabezado y el párrafo para cada mes.
const data = [ { id: "0001", month: 2, desc: "objectone" }, { id: "0001", month: 4, desc: "objecttwo" }, { id: "0001", month: 4, desc: "objectthree" }, { id: "0001", month: 4, desc: "objectfour" }, { id: "0001", month: 5, desc: "objectfive" }, { id: "0001", month: 5, desc: "objectsix" }, ]; const groups = data.reduce((r, d) => ((r[d.month] ??= []).push(d.desc), r), {}); Object.entries(groups).forEach(([mon, desc]) => { const h2 = document.createElement("h2"); h2.textContent = `Month ${mon}`; const p = document.createElement("p"); p.textContent = desc.join(" "); document.body.appendChild(h2); document.body.appendChild(p); });