CODEWITHSUNDEEP
ajaxfor-loop
Donovant
Donovant

Reputation: 3161

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

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;
                        }
                    }

                }
            );

        }
    }

Upvotes: 0

Views: 48

Answers (3)

Fordio
Fordio

Reputation: 3820

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;
                }
            }
        }
}

Upvotes: 1

New Dev
New Dev

Reputation: 49590

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));

Upvotes: 1

Eugene Gluhotorenko
Eugene Gluhotorenko

Reputation: 3164

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.

Upvotes: 1

Related Questions