AngularJS and $http

Question

AngularJS and $http

I am trying to read in data from several sources to an AngularJS controller like so -

var Controller = function ($scope, $http) {
    var load = {
        somekey: "/data/a.json",
        someotherkey: "/data/b.json",
        yetanotherkey: "http://restapi"
    }
    for (var i in load) {
        $http({
            url: load[i],
            method: 'GET'
        }).success(function (data, status, headers, config) {
            $scope[i] = data; // <<---- this does not point to the right value of i
        }).error(function (data, status, headers, config){
            $scope[i] = "Error getting content for " + i;
        });
    }
}

However this code doesn't seem to work because content of the variable i changes in loop while the callbacks are still executing (ie. the HTTP requests do not finish in the time taken to loop over all the values in the dictionary), so only the last value of i is updated and all other values are not used.

How do I get around this problem?

javascript
html5
asynchronous
angularjs

Answer 1

I guess the correct way to write the loop was -

Object.keys(load).forEach(function (element, index, array) {
    $http({
        url: load[element],
        method: 'GET'
    }).success(function (data, status, headers, config) {
        $scope[element] = data;
    }).error(function (data, status, headers, config){
        $scope[element] = "Error getting content for " + i;
    });
});

Answer 2

Or, of course, make a simple closure yourself:

for (var item in load) {
    (function(i) {
        $http({
            url: load[i],
            method: 'GET'
        }).success(function (data, status, headers, config) {
            $scope[i] = data; // <<---- this does not point to the right value of i
        }).error(function (data, status, headers, config){
            $scope[i] = "Error getting content for " + i;
        });
    })(item);
}