Angular- Warten auf asynchrone Aufgabe zu vervollständigen

Question

Hintergrund:

Derzeit habe ich eine Funktion, die die Top 5 Kunden aus der Datenbank zurückgibt. Das zurückgegebene Objekt enthält jedoch nur {userId, visitCount}. Um den Benutzernamen abzurufen, muss ich einen weiteren API-Aufruf durchführen, um das Benutzerprofil basierend auf der Benutzer-ID abzurufen. Das endgültige Objekt ($ scope.topFiveCustomer) enthält die folgenden Informationen {userId, visitCount, name}.

Problem:

Nachdem ich den Benutzernamen abgerufen, wenn ich $ scope.topFiveCustomers [0], nur dieses Objekt enthalten {userId, BesuchsZählwert} verwenden console.log zu drucken. Ich frage mich, gibt es eine Möglichkeit zu warten, bis der Name (der folgende Code) abzurufen, bevor ich etwas anderes tun?

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

Aktuelle Code:

$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 

    }); 

};

Mein Versuch, dieses Problem zu lösen, indem $ q mit:

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

Sie haben Benutzer von $q.all Funktion zu übernehmen, die bis alle fünf Kundendaten abgerufen werden warten. .

-Code

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