반복 도중 API 처리 anglejs

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. 나머지 호출이 난 나머지 API 이후 자동차 항목에 따라 액세서리를 설정하는 기대
이 반복에서 발사 한 비동기 해고되었고, 각각의 자동차 항목에 액세서리를 설정하지 않았지만, 모든 액세서리를 설정 한 응답이 하나뿐입니다.
3. 나머지 API는 반복에서 해고되었으므로 carList.length 응답을 얻으 려하므로 대신 하나의 응답을 얻습니다.

Answer 1

항상 비동기라고 생각해야합니다. 순차적 비동기 호출은 이전 콜백 함수 내에서 실행되어야합니다.

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

    }); 

}); 

어쩌면 그냥 예입니다,하지만 난 두 번째 호출이 carId을받을 수있는 몇 가지 라우팅 규칙을해야한다고 생각 .. :

그래서 두 번째 API 호출 (accesoriesList.htm)는 제 콜백 내부에 있어야한다