Angular HTTP Nhận vòng lặp

Question

Tôi gặp sự cố với ứng dụng Góc.

Tôi có một mảng chứa mã ngắn langs ('en', 'fr', ...). Và về cơ bản, Tôi muốn Angular lặp trên mảng đó và làm cho HTTP nhận được yêu cầu trên mỗi giá trị.

for (var i in $scope.langs) { 
     console.log($scope.langs[i].shortName); 
     $http.get($scope.appURL + $scope.langs[i].shortName + '/api/products/?format=json&resto='+ $scope.restoID) 
     .then(function(res){ 
      $scope.products = angular.fromJson(res.data); 
      window.localStorage.setItem("products-"+$scope.langs[i].shortName, JSON.stringify(res.data)); 
      $scope.products = JSON.parse(window.localStorage.getItem("products-"+$scope.langs[i].shortName)); 
      console.log('LANG = '+ $scope.langs[i].shortName, $scope.products); 
      }); 
} 

Nhật ký đầu tiên cho thấy:

fr 
en 

Tuyệt vời! Các bản ghi cuối cùng được ném hai lần (tôi đã có 2 lang trong mảng của tôi), tuyệt vời quá.

Vấn đề là trong vòng lặp, nhật ký cho thấy cùng một ngôn ngữ trong cả hai trường hợp, khi tôi nên có một fr/api/... và một en/api/... Nó luôn luôn đăng nhập 2 en/api/...

Tôi không biết nếu nó rõ ràng ... Bất kỳ ý tưởng?

Answer 1

Vấn đề là i thay đổi biến trước khi tất cả yêu cầu ajax của bạn trở lại. Do đó, nó sẽ luôn bằng $scope.langs.length - 1 khi gọi lại của bạn thực thi. Bạn sẽ muốn tạo một bao đóng xung quanh mỗi yêu cầu $http của mình. Góc có một số chức năng được tích hợp sẵn cho rằng:

angular.forEach($scope.langs, function(lang){ 
    // Here, the lang object will represent the lang you called the request on for the scope of the function 
    $http.get($scope.appURL + lang.shortName + '/whatever/you/want', function(res) { 
    // Do whatever you want with lang here. lang will be the same object you called the request with as it resides in the same 'closure' 
    window.localStorage.setItem(lang.shortName, JSON.stringify(res.data)); 
    }); 
});