Request Javascript/Angular running into problems with Async stuff

Question

I've got some code that does the following.... The first get call basically just gives a list of posts in data. Then for each post, there are a number of replies which I would like to load given by the second get call. The problem is, it actually goes through the loop but then only loads the last reply.

 http.get("../api/sortpost/trending").success(function (data){
            scope.posts = data;
            for(var i = 0; i < scope.posts.length; i++){
              post=scope.posts[i];
              console.log(i); //prints 1 to i as expected
              http.get("/api/postreply/"+post.id).success(function (data){
                post.replies = data;
                console.log(i); //prints i only i number of times
              });
            }
      });

Anyone know how to fix? I am guessing that I am looping too quickly through and that the get request does not have enough time to process. Thus something funny is happening with my post.replies and i and the post is changing before the request is actually complete.

Looks like a combination of this one http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example plus this other one http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — elclanrs, Jan 19 '15 at 08:02

score 2 · Answer 1 · answered Jan 19 '15 at 08:06

2

elclanrs comment correctly addresses the problem, you could try to make a promises array and execute them all at once and then get a list of all the results at once:

 var promisesArray=[];
 for(var i = 0; i < scope.posts.length; i++) {
        post=scope.posts[i];
        console.log(i); //prints 1 to i as expected
        promisesArray.push(http.get("/api/postreply/"+post.id));
 }

And then:

$q.all(promisesArray).then(function(aggregateData){
   console.log(aggregateData);
})

answered Jan 19 '15 at 08:06

Mohammad Sepahvand

17,364
22
81
122

I would I use the promises array to get the right post back though? – John Jan 19 '15 at 08:12
Assuming you have something linking each post to its replies, for example your post reply (should) have something like `postId` on them, you could find out which replies belong to which post, requires a bit more code though. – Mohammad Sepahvand Jan 19 '15 at 08:14
So I do have that, but that would require me running through an entire for loop of all my posts to check that every time. (the order is messed up because its sorted based on different filters). Is there a more elegant way of doing this? – John Jan 19 '15 at 08:16
@user3525295 If you want to return all posts and all their replies at the same time, why don't you just return the replies of each post within the post itself when you retrieve the posts initially? If you take my approach, you could try grouping the replies by postId, use something like [underscores groupby](http://underscorejs.org/#groupBy) – Mohammad Sepahvand Jan 19 '15 at 08:19
Yah I might wind up doing that, was hoping there was a simpler solution – John Jan 19 '15 at 08:32

score 1 · Answer 2 · edited Jan 19 '15 at 08:26

1

Your post { post=scope.posts[i];} is getting modified on each item of the loop. The resulting post will be the last item in the array scope.posts ie. post = {some last one}

Thats why you are only seeing one post request since angular caches the post requests with the same url.

This is happening because your loop would run and get requests would be queued since javascript is single threaded. After your loop gets over all the $http.get will see the same value ie last value of post through clousers.

You can use Immediately invoked functions to tackle this problem.

    (function(myPost){
                 http.get("/api/postreply/"+myPost.id).success(function (data){
                    post.replies = data;
                    console.log(i); //prints i only i number of times
                  });
    })(post);

edited Jan 19 '15 at 08:26

Tech Savvy

93
10

answered Jan 19 '15 at 08:05

Piyush.kapoor

6,715
1
21
21

Are you referring to the following? http.get("../api/sortpost/trending").success(function (data){ scope.posts = data; for(var i = 0; i < scope.posts.length; i++){ post=scope.posts[i]; (function(myPost){ http.get("/api/postreply/"+myPost.id).success(function (data){ post.replies = data; console.log(i); //prints i only i number of times }); })(post); } }); – John Jan 19 '15 at 08:13
In which case this still returns the same result unfortunately :( – John Jan 19 '15 at 08:14

Request Javascript/Angular running into problems with Async stuff

2 Answers2