Javascript 在for循环完成后获取数组值_Javascript_Json_Angularjs_For Loop_Promise

Javascript 在for循环完成后获取数组值

javascript json angularjs for-loop

Javascript 在for循环完成后获取数组值,javascript,json,angularjs,for-loop,promise,Javascript,Json,Angularjs,For Loop,Promise,我使用的是一个数据集，我想在其中获取某一天列入名册的工作人员的姓名和职位。问题是数据被分为三个不同的端点，所以我需要将它们全部连接起来，以获得我想要的有意义的数据端点 /团队（已列入今天的团队名册） /staff/：employeeID（plnkr中的name-staffID.json） /role/：employeeID（plnkr中的role-staffID.json）我有下面的代码在此工作，但我不能确定的是，当我在API调用后使用$scope.team时，我是否可以依赖于获取数据。当

我使用的是一个数据集，我想在其中获取某一天列入名册的工作人员的姓名和职位。
问题是数据被分为三个不同的端点，所以我需要将它们全部连接起来，以获得我想要的有意义的数据

端点 /团队（已列入今天的团队名册）

/staff/：employeeID（plnkr中的name-staffID.json）

/role/：employeeID（plnkr中的role-staffID.json）

我有下面的代码在此工作，但我不能确定的是，当我在API调用后使用

$scope.team

时，我是否可以依赖于获取数据。当我今天在console.log中记录阵列时，它会返回

[]

。是否有更好的方法来处理这种情况，例如在forloop完成后

$scope.team

，或者我采用的方法可靠吗

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
    <script src="script1.js"></script>
  </head>

  <body>
    <div ng-app="App">
      <div ng-controller="MainCtrl">
        <ul>
          <li ng-repeat="t in team">{{t.firstname}} is the {{t.role}}</li>
        </ul>
    </div>
  </body>

</html>

正如@JoaozitoPolo所说，你需要的是一个

$q.all

：

function MainCtrl($scope, $q, APIService) {
  function getTeams() {
    var tmpTeamData = {}, promises = [];

    APIService.getTeam().then(function(teamData){
      teamData.forEach(function(datum){
        tmpTeamData[datum.employeeID] = datum;
        var pGetStaff = APIService.getStaff(datum.employeeID).then(addDatum);
        var pGetRole = APIService.getRole(datum.employeeID).then(addDatum);
        promises.push(pGetStaff);
        promises.push(pGetRole);
      });
      $q.all(promises).then(function(){
        //changing structure from object to array
        $scope.team = [];
        for(var key in tmpTeamData) $scope.team.push(tmpTeamData[key]);
      });
    });

    function addDatum(datum){
      if(!tmpTeamData[datum.employeeID]){
        tmpTeamData[datum.employeeID] = datum;
      }else{
        for(var key in datum)   tmpTeamData[datum.employeeID][key] = datum[key];
      }
    }
  }
  getTeams();      
}

只有在完成所有承诺后，才能尝试使用$q.all（）更新目标数组。不是一对一。

{
  "roleID": "1",
  "employeeID": "111",
  "role": "Manager"
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
    <script src="script1.js"></script>
  </head>

  <body>
    <div ng-app="App">
      <div ng-controller="MainCtrl">
        <ul>
          <li ng-repeat="t in team">{{t.firstname}} is the {{t.role}}</li>
        </ul>
    </div>
  </body>

</html>

(function () {
    function MainCtrl($scope, APIService) {
        function getTeams() {
          var todaysTeam = [];
            APIService.getTeam()
            .success(function (data) {
              for (var i in data) {
              //console.log(data[i].employeeID);
                APIService.getStaff(data[i].employeeID)
                .success(function (staff) {
                  APIService.getRole(staff.employeeID)
                  .success(function (role) {
                    console.log(staff.firstName + ' is the ' + role.role);
                    todaysTeam.push({
                      "firstname": staff.firstName,
                      "role": role.role
                    });
                    console.log(todaysTeam);
                  });
                });
              }
            });
            console.log(todaysTeam);
            $scope.team = todaysTeam;
        }
      getTeams();
    }      
    function APIService($http) {
        var APICalls = {};
        APICalls.getTeam = function () {
            return $http.get('team.json')
            .success(function (data, status, headers, config) {})
            .error(function (data, status, headers, config) {});
        };
        APICalls.getStaff = function (staffID) {
            return $http.get('name-' + staffID + '.json')
            .success(function (data, status, headers, config) {})
            .error(function (data, status, headers, config) {});
        };
        APICalls.getRole = function (staffID) {
            return $http.get('role-' + staffID + '.json')
            .success(function (data, status, headers, config) {})
            .error(function (data, status, headers, config) {});
        };        
        return APICalls;
    }
    angular.module('App', [])
        .controller('MainCtrl', MainCtrl)
        .factory('APIService', APIService);
})();

function MainCtrl($scope, $q, APIService) {
  function getTeams() {
    var tmpTeamData = {}, promises = [];

    APIService.getTeam().then(function(teamData){
      teamData.forEach(function(datum){
        tmpTeamData[datum.employeeID] = datum;
        var pGetStaff = APIService.getStaff(datum.employeeID).then(addDatum);
        var pGetRole = APIService.getRole(datum.employeeID).then(addDatum);
        promises.push(pGetStaff);
        promises.push(pGetRole);
      });
      $q.all(promises).then(function(){
        //changing structure from object to array
        $scope.team = [];
        for(var key in tmpTeamData) $scope.team.push(tmpTeamData[key]);
      });
    });

    function addDatum(datum){
      if(!tmpTeamData[datum.employeeID]){
        tmpTeamData[datum.employeeID] = datum;
      }else{
        for(var key in datum)   tmpTeamData[datum.employeeID][key] = datum[key];
      }
    }
  }
  getTeams();      
}