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 ?

and this one How to generate event handlers with loop in Javascript? — Fabrício Matté
– Fabrício Matté, Commented Nov 14, 2013 at 16:12

Pierre-Yves Le Dévéhat · Accepted Answer · 2013-12-03 09:08:27Z

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 3, 2013 at 9:08

Pierre-Yves Le Dévéhat

1,01512 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stephane Over a year ago

Trop fort !! You saved my skin here ! I now need to read about javascript closures.

OlivierTerrien Over a year ago

Thank you so much. I didn't understand why I had the same behavior. Using a function solved the problem.

yotamsha · Accepted Answer · 2013-11-15 01:52:58Z

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, 2013 at 1:52

yotamsha

3841 silver badge7 bronze badges

Comments

Darryl · Accepted Answer · 2013-11-15 08:03:54Z

0

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.

answered Nov 15, 2013 at 8:03

Darryl

1,4511 gold badge12 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related