角度循环请求undefined

Question

$http.get("./data/web.json")请求成功并返回一个数组。当我通过请求循环数组时，迭代器变量i将不确定？！那么如何访问返回数组并执行循环请求？

<script> 
     var ngApp = angular.module("webApp", ['xml']) 
     .config(function ($httpProvider) { 
      $httpProvider.interceptors.push('xmlHttpInterceptor'); 
      }) 
     .controller("webCtrl", function($scope, $http) { 
      $http.get("./data/web.json") 
      .success(function(response) { 
       $scope.websites = response; 
       for (i = 0; i < $scope.websites.length; i++){ 
        $http.get('../api/alexa?url=' + $scope.websites[i].url) 
        .success(function(rsp) { 
         //$scope.websites[i].rank = rsp.data.POPULARITY.TEXT; 

         console.log($scope.websites[i]); 
        }); 
       } 
       console.log(response); 
      }); 

     }); 
    </script> 

Answer 1

.controller("webCtrl", function ($scope, $http) { 
    $http.get("./data/web.json") 
    .success(function (response) { 
     $scope.websites = response; 
     for (i = 0; i < $scope.websites.length; i++) { 
     $scope.processWebsites($scope.websites[i], i); 
     } 

    }); 
    $scope.processWebsites = function (website, index) { 
    $http.get('../api/alexa?url=' + website.url) 
     .success(function (rsp) { 
     console.log($scope.websites[index]); 
     }); 
    } 

}); 

试试看看这个代码。这将创建一个新的执行上下文，从而消除异步执行造成的任何无意的副作用。

Answer 2

我不知道你的反应JSON的样子，但它应该是键值对或单个键值对 的阵列，所以如果你有一个像

[ {key:value},{key:value},{key:value}]

作为响应假设一个关键是url在你的情况下

它应该直接为你工作，现在你正在寻找一个叫做的密钥我 这是未定义的网站[i]。

尝试做这个

foreach loop

Answer 3

我是不是在你的第二个成功回调定义，因为它是一个异步回调时，被称之为父范围，因为它执行了无效没有定义任何局部变量，你应该在for循环中定义迭代器，所以它应该是正确的declared and hoisted

但你应该知道，因为它是一个异步回调，你将有一个竞争条件，当大多数机会循环将在第一次回调之前结束d，并在所有的迭代的迭代器值将数组的大小（最后一个值）

var a = [1, 2, 4] 
 

 

 
for (var i = 0; i < a.length; i++) { 
 
    var that = this; 
 
    that.iterator = i; 
 
    setTimeout(function() { 
 
    alert(a[that.iterator]); 
 
    }, 10); 
 

 

 
}

我建议你来汇总调用和使用聚合回调来处理所有的他们在一起使用$q.all

Answer 4

您要访问变量i，但如果您的请求抽空多的时间则 循环不会等待它会做Ajax调用等之后执行的循环结束 你我将是$ scope.websites 。长度+ 1（因为我++）所以你会得到undefined来解决这个问题，你必须使用闭合功能

JavaScript closure inside loops – simple practical example

var funcs = []; 

function createfunc(i) { 

    return function() { 
     $http.get('../api/alexa?url=' + $scope.websites[i].url) 
      .success(function(rsp) { 
       //$scope.websites[i].rank = rsp.data.POPULARITY.TEXT; 
       console.log($scope.websites[i]); 
      }); 

    }; 
} 
$http.get("./data/web.json") 
    .success(function(response) { 
     $scope.websites = response; 
     for (i = 0; i < $scope.websites.length; i++) { 
      funcs[i] = createfunc(i) 
      $http.get('../api/alexa?url=' + $scope.websites[i].url) 
       .success(function(rsp) { 
        //$scope.websites[i].rank = rsp.data.POPULARITY.TEXT; 

       }); 
     } 
     console.log(response); 
    }); 
for (i = 0; i < funcs.length; i++) { 

    funcs[i](); 
}