AngularJS : assign asynchronous data to an array element in a for loop

Question

I'm trying to assign array elements in a for loop with asynchronous results of a call to a ngResource action.

for ( var i = 0; i < projs.length; i++) {
    $scope.projets[i].redacteur = new Object(); // the Object where the result will be stored
    var param = new Object();
    param.email = projs[i].redacteurEmail;
    Agent.read(param, function(data) {
        $scope.projets[i].redacteur = data;
    });


}

The problem is : when the callback function is executed (when the data is received), i is out of bounds (it passed the last i++). Then the data received is assigned to a nonexistent object.

Any idea of a solution to this issue ?

possible duplicate of [Javascript infamous Loop problem?](http://stackoverflow.com/questions/1451009/javascript-infamous-loop-problem) — Fabrício Matté, Nov 14 '13 at 16:10
and [Problem with loop](http://stackoverflow.com/questions/6549911/problem-with-loop) — Fabrício Matté, Nov 14 '13 at 16:11
and [Weird value for counter variable in javascript](http://stackoverflow.com/questions/10317495/weird-value-for-counter-variable-in-javascript) — Fabrício Matté, Nov 14 '13 at 16:11
also [Why is the answer to this 10?](http://stackoverflow.com/questions/18622522/why-is-the-answer-to-this-10) — Fabrício Matté, Nov 14 '13 at 16:12
and this one [How to generate event handlers with loop in Javascript?](http://stackoverflow.com/q/6487366/1331430) — Fabrício Matté, Nov 14 '13 at 16:12

score 2 · Accepted Answer · answered Dec 03 '13 at 09:08

2

I solved this issue by putting the call to the callback function in a closure. With my example, it looks like that :

for (var i = 0; i < projs.length; i++) {
    $scope.projets[i].redacteur = new Object(); // the Object where the result will be stored
    var param = new Object();
    param.email = projs[i].redacteurEmail;
    (function(i) {
        Agent.read(param, function(data) {
            $scope.projets[i].redacteur = data;
        });
    })(i);
}

answered Dec 03 '13 at 09:08

Pierre-Yves Le Dévéhat

1,015
11
24

Trop fort !! You saved my skin here ! I now need to read about javascript closures. – Stephane Oct 08 '14 at 13:11
Thank you so much. I didn't understand why I had the same behavior. Using a function solved the problem. – OlivierTerrien Aug 29 '18 at 14:05

score 0 · Answer 2 · answered Nov 15 '13 at 01:52

0

I had a similar issue, and I solved it by using Promises. The basic idea is that I send the index of the array as a parameter to my asynchronous request callback, and then I can handle it when the response arrives. Hope that helps.

answered Nov 15 '13 at 01:52

yotamsha

384
1
7

score 0 · Answer 3 · answered Nov 15 '13 at 08:03

If I understand your issue correctly, I believe this may work.

myData = Agent.read(param, function() {
    $scope.projets[i].redacteur = myData;
});

This is the approach I have used. I'm still new to Angular, but my understanding is that myData becomes a deferred promise. As a deferred promise it must be resolved prior to use. Please, someone who has more experience Angular and deferred promises chime in.

AngularJS : assign asynchronous data to an array element in a for loop

3 Answers3