显示按对象数组中的值分组的每个组的标题

Question

我正在接收JS中作为对象数组的数据。每个对象都有一个值month，我想根据月份显示分组数据。示例：

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

现在我想这样展示：

<h1>Month {month}</h1>
<p>{desc}</p>

第2个月目标

第4个月对象wo对象三目标四

第5个月对象5目标六

我已经使用reduce按值对其进行分组，但在将其映射为如上所述的显示时仍然存在问题。在reduce之后，我得到了一个包含对象数组的对象：

data: {
1:(1) [{...}],
2:(3) [{...}],
3:(2) [{...}]
}

感谢

Answer 1

对数据进行分组后，可以使用Object.entries对数据进行循环，然后在循环中创建每个月的标题和段落。

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