What can I do to give out the right object through ajax that is into a for loop

Question

The problem is that the FOR goes ahead while the ajax call retrieves the data from the URL, so only the last element into the array take the datum. How can I synch the for with the ajax call, in that case?

   for(ii in scope.selMovies){
        for(jj in scope.selMovies[ii]){

            var title = scope.selMovies[ii][jj].title.replace(/\s*\(.*/, "");
            var yearMovie = scope.selMovies[ii][jj].title.match(/\(.*(20|19)[\d]{2}/)[0].replace(/[^\d]/g, "");

            http.jsonp(url + "&query=" + title + callb).
                success(function (data) { console.log( ii, jj, title, data.results );
                    for (k in data.results){
                        if(data.results[k].release_date.substr(0, 4) == yearMovie ) {
                            scope.selMovies[ii][jj].infoes = data.results[k];
                            break;
                        }
                    }

                }
            );

        }
    }

score 1 · Answer 1 · answered Oct 03 '14 at 07:20

1

Promises in AngularJS are async so that for working with bunch AJAX requests is better to use $q.all to handle all the responses after answering all the requests.

answered Oct 03 '14 at 07:20

Eugene Gluhotorenko

3,094
2
33
52

could you give me an example? please. – Donovant Oct 03 '14 at 08:43

score 1 · Accepted Answer · edited May 23 '17 at 12:11

Does your console.log(ii, jj, title, data.results) always display the last ii and jj and title?

The problem is not that the for loop goes ahead while Ajax call call retrieves the data. The problem is that your .success callback function of http.jsonp is a closure within a loop, so it doesn't behave quite as one would naively expect.

Read this answer for better understanding of what is going on.

To fix your specific case, do the following:

function MakeSuccessFn(scope, ii, jj, yearMovie, title){
   return function (data) { 
     console.log( ii, jj, title, data.results );
        for (k in data.results){
          if(data.results[k].release_date.substr(0, 4) == yearMovie ) {
            scope.selMovies[ii][jj].infoes = data.results[k];
            break;
          }
        }

   };
}

Then within the loop, change your http.jsonp to the following

http.jsonp(url + "&query=" + title + callb)
.success(MakeSuccessFn(scope, ii, jj, yearMovie, title));

score 1 · Answer 3 · answered Oct 03 '14 at 07:58

You need to create a closure around your ajax call to encapsulate the values that are changed with every loop iteration at the point the Ajax call is made. Try this:

for(ii in scope.selMovies){
    for(jj in scope.selMovies[ii]){
        var title = scope.selMovies[ii][jj].title.replace(/\s*\(.*/, "");
        var yearMovie = scope.selMovies[ii][jj].title.match(/\(.*(20|19)[\d]{2}/)[0].replace(/[^\d]/g, "");
        doAjax(ii, jj, title, yearMovie);
         }
}

function doAjax(count1, count2, title, yearMovie) {
    http.jsonp(url + "&query=" + title + callb).
        success(function (data) { console.log( count1, count2, title, data.results );
            for (k in data.results){
                if(data.results[k].release_date.substr(0, 4) == yearMovie ) {
                    scope.selMovies[count1][count2].infoes = data.results[k];
                    break;
                }
            }
        }
}

What can I do to give out the right object through ajax that is into a for loop

3 Answers3