在迭代angularjs期间处理rest API

Question

How to handle this code snippet from the given fiddler.

for (var i = 0; i < carList.length; i++) {
    $http.get("accesoriesList.htm").then(function(accesories) {
      $scope.accesoriesList.push({"id": carId, "name": carName, "accesories" : accesories});
}

Fiddler https://jsfiddle.net/gsk/euuhsowu/

I am trying to get list of accessories of a car. But I got different issue:

1. Rest call were fired asynchronous and didn't set accessories to their respective car item
2. I would expect to set accessories based on car item since rest API has fired in iteration but I get only one response that set to all accessories.
3. Rest API were fired in iteration so I expect to get carList.length response instead I get one response.

Answer 1

You should think async always. Sequential async calls should be putted within previous callback's functions.

So the second API calls ( accesoriesList.htm ) should be inside the first callback:

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $scope.carList = [];
    $scope.accesoriesList = [];

    $http.get("carList.htm").then(function(data) {
      for (var i = 0; i < data.length; i++) {
            $scope.carList.push({"id": data[i].carId, "name": data[i].carName});
      }

      for (var i = 0; i < $scope.carList.length; i++) {
        $http.get("accesoriesList.htm").then(function(accesories) {
          $scope.accesoriesList.push({"id": carId, "name": carName, "accesories" : accesories});
        });
      }

  });

});

Maybe it's just an example, but I think that the second call should have some routing rule to receive the carId...