Изменение угловых переменных области применения с использованием Foreach

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? (N.B .: Я новичок в угловых и 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 библиотеку, вы можете вернуть обещание, так что это должно помочь вам - я не могу подтвердить это, как я в работе, но он должен вас подвести. Взгляните на Angular q Library

Answer 2

$http асинхронный характер, необходимо вызвать foreach, когда оба Аякса запросы будут завершены. Например:

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

     }); 
    }); 



});