时间戳

首页 > 解决方案 > 如何添加

在每个新类别之后

javascript - 如何添加
在每个新类别之后

问题描述

我有一个称为元素的对象数组，这些对象有两个值（name和category）。

[
  {name : 'key1', category : 'tech'},
  {name : 'key2', category : 'tech'},
  {name : 'key3', category : 'tech'},
  {name : 'cable1' , category : 'hard'}
  {name : 'cable2' , category : 'hard'}
  {name : 'cable3' , category : 'hard'}
  {name : 'cable4' , category : 'hard'}
]

我想显示所有名称，但<hr>每当到达新类别时添加一个

请帮助并感谢您的帮助。

标签： javascripthtmlarrays

解决方案

我将首先使用Array.prototype.reduce()按类别对您的对象进行分组，然后使用Array.prototype.map ()遍历每个类别：

const data = [
  {name : 'key1', category : 'tech'},
  {name : 'wire1' , category : 'misc'},
  {name : 'key2', category : 'tech'},
  {name : 'cable1' , category : 'hard'},
  {name : 'key3', category : 'tech'},
  {name : 'cable2' , category : 'hard'},
  {name : 'wire2' , category : 'misc'}
];

const dataMap = data.reduce((acc, x) => {
  acc[x.category] = [...(acc[x.category] || []), x];
  return acc;
}, {});

const html = Object.entries(dataMap).map(([cat, items]) => {
  return items.map(item => `<div>${item.name} ${item.category}</div>`).join('');
}).join('<hr>');

document.getElementById('app').innerHTML = html;
<div id="app"></div>

推荐阅读