我在 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 個月物件二物件三物件四
第 5 個月目標物件ix
我曾經reduce按值對其進行分組，但在將其映射為如上所述時仍然存在問題。減少后，我得到一個包含物件陣列的物件：
data: {
1:(1) [{...}],
2:(3) [{...}],
3:(2) [{...}]
}
謝謝
uj5u.com熱心網友回復：
將資料分組后，您可以使用回圈遍歷它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);
});uj5u.com熱心網友回復：
如果您將資料簡化為表單的物件
{ monthnum: [desc1, desc2, ...], ... }
然后，您可以迭代物件的條目，將鍵放入 anh1并將每個desc值放入 a p：
input = {
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'}
]
}
months = input.data.reduce((acc, { month, desc }) => {
acc[month] = (acc[month] || []).concat(desc)
return acc
}, {})
Object.entries(months)
.forEach(([m, v]) => {
const h = document.createElement("h1")
h.textContent = `Month ${m}`
document.body.appendChild(h)
v.forEach(d => {
const p = document.createElement("p")
p.textContent = d
document.body.appendChild(p)
})
})h1 {
font-size: 20px;
}轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/497316.html
標籤：javascript 数组 目的 减少
上一篇：更改當前選定元素側邊欄的顏色