javascript - 分组数组变空(Lodash 的 groupBy 确实有效)

Question

这是示例 plunker http://embed.plnkr.co/bJFmT0WlRfqUgrCxZRT6

首先:我按某个键对集合进行分组 - 在我的示例中是 yob。

我有两个选择-

• 我可以编写一个自定义函数来完成这项工作(我想这样做，因为我可以添加自定义逻辑)
• 我可以使用 lodash/underscore.js 提供的 _.groupBy

所以我决定尝试这两种方法 - 使用 lodash 我按键对集合进行分组并显示输出(参见 plunkr)

当我使用自定义方法时，studentsByYear 在这种情况下，数组在显示之前以某种方式变为空。我在返回数组之前让控制台记录了我的输出，并且该数组具有所需的输出..

所以我的问题是为什么我的分组方法不起作用？我错过了一些明显的 Angular 吗？是否我必须在返回对象之前对对象进行深拷贝，如果是，请解释一下？

---

  <div ng-controller="myController">
    <h2> Using Lodash </h2>
    <ul ng-repeat="(yob, students) in myModel.studentsByYobLodash">
      <h3>{{ yob }}</h3>
      <div ng-repeat="s in students">
        <p> {{s.name}} </p>
      </div>
    </ul> 

    <h2>Not using Lodash </h2>
    <ul ng-repeat="(yob, students) in myModel.studentsByYob">
      <h3>{{ yob }}</h3>
      <div ng-repeat="s in students">
        <p> {{s.name}} </p>
      </div>
    </ul> 
  </div>

脚本

var app = angular.module("myApp", []);

app.factory('studentsFactory', [function () {
  var students = [{
    name: 'Tony',
    yob: '1987'
  },{
    name: 'Rachel',
    yob: '1988'
  }, {
    name: 'Eric',
    yob: '1988'
  }, {
    name: 'Jon',
    yob: '1988'
  }, {
    name: 'Tim',
    yob: '1989'
  }, {
    name: 'Bing',
    yob: '1987'
  }, {
    name: 'Valerie',
    yob: '1988'
  }, {
    name: 'Brandon',
    yob: '1987'
  }, {
    name: 'Sam',
    yob: '1987'
  }]

  return {
    getStudents: function () {
      return students;
    }
  }
}])

app.controller('myController', ['$scope', 'studentsFactory', function ($scope, studentsFactory) {
  $scope.myModel = [];
  $scope.myModel.students = studentsFactory.getStudents();

  $scope.myModel.studentsByYobLodash = studentsByYearUsingLodash($scope.myModel.students)
  $scope.myModel.studentsByYob = studentsByYear($scope.myModel.students);

  function studentsByYearUsingLodash (students) {
    return _.groupBy(students, 'yob');
  }

  function studentsByYear(students) {
    var arr = [];
    angular.forEach(students, function (student) {
      var key = student.yob;
      _.has(arr, key) ? arr[key].push(student) : (arr[key] = [student]);
    })

    return arr;
  }
}])

Answer 1

通过您拥有的结构，您可以在 ng-repeat 中使用 key, value 和对象迭代。因此，通过将 myModel.studentsByYob 作为数组发送，最终将返回一个带有空洞的数组，因为你最终会得到，例如，myModel.studentsByYob[0..] 未定义，因为它们不存在并且数组对象具有指向学生数组的属性 1987、1988 等，如果您检查浏览器控制台，您将看到 ng-repeat 代码指出的完全相同的错误，因为返回了多个未定义的键。所以只需更改:

var arr = [];

到

var arr = {};

Plunkr