Iterating variable i with deffered in angular

Question

I've stumbled on this several times, and cannot seem to find a good solution:

for (var i = types.length - 1; i >= 0; i--) {
    api.get("test").then(function(res){
        // do something with i here
        $scope.var[i] = res;
    });
};

When the then() function is triggered the iteration is already done, resulting only $scope.var[0] is being used, instead of $scope.var[1], $scope.var[2] etc.

All I can think of is either giving the i variable as argument to the function and return it with the deferred or using callbacks, but neither is really nice. Is there a solution for this?

Halcyon · Accepted Answer · 2014-07-23T09:19:08.667

1

One way is to wrap it in an anonymous function to force i to bind to the iterating value:

for (var i = types.length - 1; i >= 0; i--) {
    (function (actual_i) {
        api.get("test").then(function(res){
            // do something with i here
            $scope.var[actual_i] = res;
        });
    }(i));
};

Since you're looping over an array using the map function with a callback will give you the binding for free:

types.map(function (value, i) {
    api.get("test").then(function(res){
        // do something with i here
        $scope.var[i] = res;
    });
});

edited Jul 23 '14 at 09:19

answered Jul 14 '14 at 18:36

Halcyon

57,230
10
89
128

Straight to the point with simple, working solutions. Thank you very much! – user3136936 Jul 14 '14 at 18:39
Surely, "arrays in *javascript* have a .map function", at least, they do since ECMA-262 5th edition. `Array.prototype.map()` is not a feature of Angular. – Roamer-1888 Jul 19 '14 at 10:11
Here you go: http://kangax.github.io/compat-table/es5/ – Halcyon Jul 20 '14 at 09:44
1

Yes nice table, and `Array.prototype.map()` is still not a feature of Angular. – Roamer-1888 Jul 20 '14 at 16:33
You're right, Angular uses it's own internal map function. – Halcyon Jul 23 '14 at 09:21

Iterating variable i with deffered in angular

1 Answers1