如何制作 Primeng 通用组阵列

Question

我的对象：

users = [
  {id: 1, name: "name1", company: "com1"},
  {id: 2, name: "name2", company: "com2"},
  {id: 3, name: "name3", company: "com1"},
  {id: 4, name: "name4", company: "com2"},
  {id: 5, name: "name5", company: "com3"},
]

对于 primeng 下拉列表，我需要将其转换为首选对象，我如何使用 angular 2 来做到这一点，如下所示。

我要制作的对象：

[
  {
    label: 'com1', 
    items: [
      {id: 1, name: "name1", company: "com1"},
      {id: 3, name: "name3", company: "com1"}
     ]
  },
 {
    label: 'com2', 
    items: [
      {id: 2, name: "name2", company: "com2"},
      {id: 4, name: "name4", company: "com2"}
     ]
  },
  {
    label: 'com3', 
    items: [
      {id: 5, name: "name5", company: "com3"},
     ]
  }
]

Answer 1

我认为你可以使用 Array.prototype.reduce() and Array.prototype.find() 组合。

reduce() 的文档状态：

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

对于find()：

The find() method returns the value of the first element in the provided array that satisfies the provided testing function.

请在下面找到一个工作示例：

const users = [
  {id: 1, name: "name1", company: "com1"},
  {id: 2, name: "name2", company: "com2"},
  {id: 3, name: "name3", company: "com1"},
  {id: 4, name: "name4", company: "com2"},
  {id: 5, name: "name5", company: "com3"},
];

const result = users.reduce((a, {id, name, company}) => {
  const found = a.find(e => e.label === company);

  if (found) {
    found.items.push({
      id, name, company
    });
  } else {
    a.push({
      label: company,
      items: [{id, name, company}],
    });
  }
  return a;
}, []);

console.log(result);

+1条建议：

这完全取决于您要如何以及在何处使用解构语句，但请考虑以下事项。我也在考虑曾经在这里提供解决方案，即何时为 reduce() 解构当前项目。如果我将 (a,c) => {} 用于 reduce() 而不是 (a, {id, name, company}) => {} 那么在数组的推送行中我可以使用 {...c} 代替。

希望对您有所帮助！

如何制作 Primeng 通用组阵列

How do I make a Primeng Generic Group Array

javascript

arrays

primeng

angular