程序员经验分享-hwhale

在 AngularJS 中对对象数组进行分组

2023-12-27

基于如下所示的数组：

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}
];

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

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

或者将阵列重新组织为具有成员列表的团队阵列是否更容易？

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

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

注意：该数组不是来自数据库，而是来自 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>

你必须group项目。为此，我使用了reduce方法以便创建 Ahash集合看起来像这样：

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

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

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

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

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);
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

angularJS

Arrays

function

在 AngularJS 中对对象数组进行分组 的相关文章