Javascript 在 AngularJS 中对一组对象进行分组

Group an array of objects in AngularJS

提问by gyc

Based on an array looking like this:

基于如下所示的数组：

var members = [
  {name: "john", team: 1},
  {name: "kevin", team: 1},
  {name: "rob", team: 2},
  {name: "matt", team: 2},
  {name: "clint", team: 3},
  {name: "will", team: 3}
];

I need to create an unordered list for each team.

我需要为每个团队创建一个无序列表。

Can it be done directly with ngRepeat and a filter maybe?

可以直接用 ngRepeat 和过滤器来完成吗？

Or is it easier to reorganize the array into an array of teams with a list of members?

或者更容易将数组重组为具有成员列表的团队数组？

var teams = [
  {id: 1, members: ["john", "kevin"]},
  {id: 2, members: ["rob", "matt"]},
  {id: 3, members: ["clint", "will"]}
]

The nested ngRepeat would be easy to implement, but how do I go from the first array to this one in a simple / clever manner?

嵌套的 ngRepeat 很容易实现，但是如何以简单/巧妙的方式从第一个数组转到这个数组？

Note: The array doesn't come from the database but from an html table. So it's just a flat list of members.

注意：数组不是来自数据库，而是来自 html 表。所以这只是一个简单的成员列表。

function MyController() {
  this.members = [
    {name: "john", team: 1},
    {name: "kevin", team: 1},
    {name: "rob", team: 2},
    {name: "matt", team: 2},
    {name: "clint", team: 3},
    {name: "will", team: 3}
  ];
}

angular.module('app', []);
angular.module('app')
    .controller('MyController', MyController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MyController as ctrl">
    <ul>
      <li ng-repeat="member in ctrl.members">{{ member.name }} - {{ member.team }}</li>
    </ul>
  </div>
</div>

回答by Mihai Alexandru-Ionut

You have to groupitems. For this, I used reducemethod in order to create a hashcollection which looks like this:

你必须group物品。为此，我使用了reduce方法来创建一个如下所示的hash集合：

{
  "1": [
    "john",
    "kevin"
  ],
  "2": [
    "rob",
    "matt"
  ],
   "3": [
     "clint",
      "will"
   ]
}

The reduce() method applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数以将其减少为单个值。

The following step is to mapthis collection in an array. For this, you should use mapmethod.

下面的步骤是将map这个集合放在一个array. 为此，您应该使用map方法。

The map() method creates a new array with the results of calling a provided function on every element in this array.

map() 方法创建一个新数组，其结果是对该数组中的每个元素调用提供的函数。

var members = [
  {name: "john", team: 1},
  {name: "kevin", team: 1},
  {name: "rob", team: 2},
  {name: "matt", team: 2},
  {name: "clint", team: 3},
  {name: "will", team: 3}
];
var groups = members.reduce(function(obj,item){
    obj[item.team] = obj[item.team] || [];
    obj[item.team].push(item.name);
    return obj;
}, {});
var myArray = Object.keys(groups).map(function(key){
    return {team: key, name: groups[key]};
});
console.log(myArray);

回答by tanmay

Expanding over the @Alexandru-Ionut Mihai's answer, (just to experience how powerful a reducefunction is).. here's a single reducewithout having to mapit again to achieve the same thing. :)

扩展@Alexandru-Ionut Mihai 的答案，（只是为了体验一个reduce功能有多强大）.. 这是一个单一的，reduce无需map再次实现相同的目标。:)

var members = [
  {name: "john", team: 1},
  {name: "kevin", team: 1},
  {name: "rob", team: 2},
  {name: "matt", team: 2},
  {name: "clint", team: 3},
  {name: "will", team: 3}
];
/*var teams = [
  {id: 1, members: ["john", "kevin"]},
  {id: 2, members: ["rob", "matt"]},
  {id: 3, members: ["clint", "will"]}
]*/
var group_to_values = members.reduce(function(arr, item){
    arr[item.team - 1] = arr[item.team - 1] || { id: item.team, members: []};
    arr[item.team - 1].members.push(item.name);
    return arr;
}, []);

console.log(group_to_values);

回答by kaushlendras

If you are using underscore.js, then you can use _.groupBy() method to group array of records on the basis of team.

如果您使用 underscore.js，那么您可以使用 _.groupBy() 方法基于团队对记录数组进行分组。

function MyController() {
  this.members = [
    {name: "john", team: 1},
    {name: "kevin", team: 1},
    {name: "rob", team: 2},
    {name: "matt", team: 2},
    {name: "clint", team: 3},
    {name: "will", team: 3}
  ];

var grouped = _.groupBy(this.members, function(member) {
  return member.team;
});
}

回答by Vinod Louis

You can use a groupBy filter like this

您可以像这样使用 groupBy 过滤器

<ul ng-repeat="(key, value) in members | orderBy: 'team' | groupBy:ourGrouper">
      <li>{{key}}
        <ul>
          <li ng-repeat="mem in value | orderBy: 'name'">
            {{mem.name}}
          </li>
        </ul>
      </li>
    </ul>

See this FIDDLE

看到这个小提琴

回答by Sadun Cem Kocaba?

var members = [
  {name: "john", team: 1},
  {name: "kevin", team: 1},
  {name: "rob", team: 2},
  {name: "matt", team: 2},
  {name: "clint", team: 3},
  {name: "will", team: 3}
];
var groups = members.reduce(function(obj,item){
    obj[item.team] = obj[item.team] || [];
    obj[item.team].push(item.name);
    return obj;
}, {});
var myArray = Object.keys(groups).map(function(key){
    return {team: key, name: groups[key]};
});
console.log(myArray);