javascript - 使用 forEach 修改 Angular 范围变量

Question

鉴于服务器上的以下数据:

people.json:

{
  "Bill": "Bill the Man",
  "Jane": "Jane Doe",
  "Jack": "Jack the Ripper"
}

groups.json:

[
   ["Bill", "Jack"],
   ["Jane", "Jack"]
]

我将其导入到controllers.js中:

var websiteApp = angular.module('websiteApp', []);

websiteApp.controller('websiteCtrl', function ($scope, $http) {
  // import data
  $http.get('people.json').success(function (data) {
    $scope.people = data;
  });
  $http.get('groups.json').success(function (data) {
    $scope.groups = data;
  });

  // fill groups with people data
  $scope.groups.forEach(function (group, i) {
    group.forEach(function (person, j) {
      $scope.groups[i][j] = $scope.people[person];
    });
  });
});

然后我将其与以下模板一起使用:

<ul>
  <li ng-repeat="group in groups">
    <ul><li ng-repeat="person in group">{{person}}</li></ul>
  </li>
</ul>

我希望从 people.json 中获取姓名列表，但我得到的是 groups.json 中的名字。对 console.log 进行的进一步调查表明，forEach 循环并未执行。在分配给范围之前使用局部变量存储数据的进一步尝试也没有成功。

我应该如何处理这个问题？我对 Angular 的工作原理有什么不明白的地方？ (注意:我对 Angular 和 Javascript 框架总体来说是新手。)

Answer 1

尝试这样的事情......

var websiteApp = angular.module('websiteApp', []);

websiteApp.controller('websiteCtrl', function($scope, $http, $q) {
    // import data

    getPeopleAndGroups = function() {

        var people = $http.get('people.json');
        var groups = $http.get('groups.json');

        return $q.all([people, groups]);
    }


    getPeopleAndGroups().then(function(data) {
        var people = data[0].data;
        var groups = data[1].data;

        // fill groups with people data
        groups.forEach(function(group, i) {
            group.forEach(function(person, j) {
                $scope.groups[i][j] = $scope.people[person];
            });
        });
    })
});

使用 $q 库，您可以返回一个 promise ，所以这应该可以帮助您 - 我无法在工作时验证它，但它应该让您走上正轨。看看Angular q Library