反復処理中のハンドルレスAPI angularjs

Question

このコードスニペットを指定のフィドラーから処理する方法。

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

フィドラー https://jsfiddle.net/gsk/euuhsowu/

私は車のアクセサリーのリストを取得しようとしています。 しかし、私は別の問題だ：

1. REST呼び出しが、私は残りのAPI以来、車の項目に基づいてアクセサリーを設定することが期待される
繰り返し処理で発射している非同期発射し、それぞれの車の項目にアクセサリーを設定しなかったが、私はすべての付属品に設定されている唯一の応答を取得します。
3. 残りのAPIが繰り返し実行されたので、代わりにcarList.lengthレスポンスを取得すると予想されますが、1つのレスポンスが返されます。

Answer 1

いつもasyncと思うべきです。 シーケンシャル非同期コールは、前のコールバックの機能内に配置する必要があります。

だから、第二のAPIコール（accesoriesList.htm）は、最初のコールバック内にある必要があります：

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

    }); 

}); 

は、多分それは単なる例ですが、私は2番目の呼び出しはcarIdを受信するために、いくつかのルーティングルールを持つべきだと思います..