如何以表格格式绑定对象数组？

Question

我正在尝试解决这个问题，也许是问题的措辞对我来说很复杂。但任务基本上是计算对象数组中所有字符串的实例。

我尝试了一些实用的实用方法，例如 filter 和 reduce，但无法正确使用。

    let users = [
  {
    id: 1,
    name: "Babloo",
    
  },
  {
    id: 2,
    name: "Raam",
    
  },
  {
    id: 3,
    name: "Shyam",
    
  },
  {
    id: 4,
    name: "Balraam",
    
  },
  {
    id: 5,
    name: "Sunder",
    
  },
  {
    id: 6,
    name: "Balraam",
    
  },
  {
    id: 7,
    name: "Mahesh",
    
  }
]
// Bind this Array in a tabular format. 

我希望输出是

Name | Repeat Count

Balram | 2

Answer 1

考虑使用Map 和Array#filter。

您还可以使用结果创建table。

const table = document.querySelector("#table");

const 
  users=[{id:1,name:"Babloo"},{id:2,name:"Raam"},{id:3,name:"Shyam"},{id:4,name:"Balraam"},{id:5,name:"Sunder"},{id:6,name:"Balraam"},{id:7,name:"Mahesh"}],

  res = Array.from(users.reduce((m, { name }) => (m.set(name, (m.get(name) || 0) + 1), m), new Map()));
  
res.forEach(([name, count]) => {
  const tr = document.createElement("tr");
  const tdName = document.createElement("td");
  const tdCount = document.createElement("td");

  tdName.innerText = name;
  tdCount.innerText = count;

  tr.appendChild(tdName);
  tr.appendChild(tdCount);

  table.appendChild(tr);
});

console.log(JSON.stringify(res));

#table td {
  border: 1px solid black;
}

<table id="table">
</table>

Answer 2

您可以使用Array#reduce 按name 分组。然后像这样使用Object.entries 结合Array#map。

let users = [{id:1,name:"Babloo",},{id:2,name:"Raam",},{id:3,name:"Shyam",},{id:4,name:"Balraam",},{id:5,name:"Sunder",},{id:6,name:"Balraam",},{id:7,name:"Mahesh",}];

const groupingData = users.reduce((acc, {name}) => 
                    (acc[name] = (acc[name] || 0) + 1, acc), {});
const result = Object.entries(groupingData).map(([key, value]) => 
                    ({name: key, Repeat_Count: value}));
console.log(result);