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

发布于 2025-02-11 20:33:46 字数 686 浏览 1 评论 0原文

我将数据作为JS中的对象数组接收。每个对象都有一个值月，我想根据一个月与组一起显示数据。示例：

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个月 Objectone

月4 objecttwoo 对象三 Objectfour

月5月 objectfive Objectsix

我使用了redar按值对其进行分组，但仍有问题在映射以显示如上所述。减少后，我得到一个包含一系列对象的对象：

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

谢谢

原文

I am receiving data as an array of objects in JS. Each object has a value month and I want to show data with groups according to month. Example:

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

Now I want to show it like this:

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

Month 2
objectone

Month 4
objecttwoo
objectthree
objectfour

Month 5
objectfive
objectsix

I've used reduce to group it by the value but still having issue in mapping it to show as described above.
After reduce I get one object that contains array of objects:

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

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

请远离我 2025-02-18 20:33:46

将数据分组后，您可以使用 object.entries ，然后在循环内部创建每个月的标题和para。

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

After you've grouped the data you can loop through it using Object.entries and then inside the loop create the heading and the para for every month.

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

回复收藏 0 原文

~没有更多了~