从数组中提取值并将其添加到新元素

Question

我有一些代码循环遍历一系列产品，它记录找到的新类别以及找到某个类别的次数：

const categoriesFound = (catArray) => {
  let categories = {}
    for (let i = 0; i < catArray.length; i++) {
        let cat = catArray[i].toString()
        let numberFound = categories[cat] = ++ categories[catArray[i]] || 1
    }
  return categories
}
let numberOfCats = categoriesFound(categoryNumbers);
console.log('number of categories:', numberOfCats);

这会在控制台中返回此内容，这就是我想要提取以供使用的内容：

我认为这会是困难的一点，但实际上我正在努力提取这些键和值并将它们添加到上面列出的每个项目的新元素中。

我尝试添加一个

.createElement()

，为每个循环添加键和值并将它们附加到右父元素，所以它输出：

<div class="categories">

  <div class="category">beauty</div> <div class="">5</div>
  <div class="category">fragrance</div> <div class="">5</div>
  <div class="category">furniture</div> <div class="">5</div>
  <div class="category">groceries</div> <div class="">27</div>
  
</div>

但后来意识到这是添加所有重复的类别，而不仅仅是合并的类别列表和它们被发现的次数。

我尝试了

for

和

forEach

上的

numberOfCats

来尝试从返回的数据中提取数据，但失败了。

所以现在我一直在努力找出实现上述目标的方法，如果有帮助，我将不胜感激，谢谢。

Answer 1

您可以循环对象并动态创建元素

const obj = {
  beauty: 5,
  fragrance: 5,
  furniture: 5,
  groceries: 27
}

function test() {

  const template = document.createDocumentFragment();
  for (const keys in obj) {
    const divElement = document.createElement('div');
    divElement.classList.add('category');
    const catName = document.createElement('span');
    const catCount = document.createElement('span');
    catName.innerText = keys;
    catCount.innerText = obj[keys];
    divElement.appendChild(catName);
    divElement.appendChild(catCount);
    template.appendChild(divElement);
  }

  return template;
};
document.getElementById('categories').appendChild(test())

<div id="categories"></div>