非同期タスクが終了するまでの角度待ち

Question

背景：

現在、私はデータベースからトップ5の顧客を返す関数を持っています。ただし、返されるオブジェクトには{userId、visitCount}のみが含まれます。ユーザー名を取得するには、別のAPI呼び出しを行ってuserIdに基づいてユーザーのプロファイルを取得する必要があります。最終的なオブジェクト（$ scope.topFiveCustomer）には、{userId、visitCount、name}という情報が含まれます。

問題：

私は$ scope.topFiveCustomersを印刷するためにconsole.logを使用する場合、私は、ユーザー名を取得した後に[0]、このオブジェクトは、{にuserId、visitCount}を含みます。私は何かをする前に名前を取得するのを待つ方法（次のコード）がありますか？

_.each($scope.topFiveCustomers, function(customer) { 
    CustomerService.getCustomer(customer.uuid) 
     .then(function(response) { 
      customer['name'] = response.data.name; 
     }) 
}); 

現在コード：

$scope.getTopFive = function() { 
    DashboardService.getCustomerList($scope.topCustomerTime.value) 
     .then(function(customerList) { 
      $scope.topFiveCustomers = _.sortBy(customerList, 'visitCount').reverse().slice(0,5); 

      _.each($scope.topFiveCustomers, function(customer) { 
       CustomerService.getCustomer(customer.uuid) 
        .then(function(response) { 
         customer['name'] = response.data.name; 
        }) 
      }); 

      console.log($scope.topFiveCustomers); 
      //name: test 
      //uuid: 1234 
      //visitCount: 5 

      console.log($scope.topFiveCustomers[0]); 
      //uuid: 1234 
      //visitCount: 5 

    }); 

}。 $ qを使用することによってこの問題を解決するために

私の試み：

function getCustomerName(){ 
    var deferred = $q.defer(); 

    _.each($scope.topFiveCustomers, function(customer) { 
     CustomerService.getCustomer(customer.uuid) 
      .then(function(response) { 
       customer['name'] = response.data.name; 
      }) 
    }); 

    deferred.resolve(); 

    return deferred.promise; 
} 


$scope.getTopFive = function() { 
    DashboardService.getCustomerList($scope.topCustomerTime.value) 
     .then(function(customerList) { 
      $scope.topFiveCustomers = _.sortBy(customerList, 'visitCount').reverse().slice(0,5); 

      getCustomerName() 
       .then(function() { 
        new Chartist.Bar('#topCustomer', { 
         labels: [$scope.topFiveCustomers[0].uuid], 
         series: [$scope.topFiveCustomers[0].visitCount] 
        }, { 
         distributeSeries: true, 
         reverseData: true, 
         horizontalBars: true, 
         width: 250, 
         height: 250 
        }); 
       });       
     }); 
}; 

Answer 1

あなたはすべての5件の顧客データが取得されますまで待機します$q.all機能のユーザーを取らなければなりません。

コード

function getCustomerName() { 
    var promises = []; 
    _.each($scope.topFiveCustomers, function(customer) { 
     //creating a promise array 
     promises.push(CustomerService.getCustomer(customer.uuid) 
      .then(function(response) { 
       customer['name'] = response.data.name; 
      })) 
    }); 
    return $q.all(promises); //returning combined 5 promises array. 
}; 


$scope.getTopFive = function() { 
    DashboardService.getCustomerList($scope.topCustomerTime.value) 
     .then(function(customerList) { 
     $scope.topFiveCustomers = _.sortBy(customerList, 'visitCount').reverse().slice(0, 5); 

     getCustomerName() //will wait till all promises get resolved. 
     .then(function(response) { 
     angular.forEach($scope.topFiveCustomers, function(customer) { 
      new Chartist.Bar('#topCustomer', { 
      labels: [customer.uuid], 
      series: [customer.visitCount] 
      }, { 
      distributeSeries: true, 
      reverseData: true, 
      horizontalBars: true, 
      width: 250, 
      height: 250 
      }); 
     }); 
     }); 
    }); 
};