简体   繁体   English

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

[英]How to bind an array of objects in a tabular format?

I am trying to solve this question, maybe it's the wording of the question that's complicated for me.我正在尝试解决这个问题,也许是问题的措辞对我来说很复杂。 But the task is basically to count the instances of all the strings in an array of objects.但任务基本上是计算对象数组中所有字符串的实例。

I have tried some functional utility methods like filter and reduce but just couldn't get it right.我已经尝试了一些功能实用的方法,例如过滤器和减少,但就是无法正确处理。

    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. 

I expect output to be我希望 output 是

Name | Repeat Count

Balram | 2

You can use Array#reduce to group by name .您可以使用Array#reducename分组。 Then use Object.entries combined with Array#map like this.然后像这样使用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);

Consider using a Map and Array#filter .考虑使用MapArray#filter

You can also create a table using the result.您还可以使用结果创建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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM