JavaScript/jQuery callback using Ajax

Question

I'm having trouble with my functions running before Ajax requests (the first to a local JSON, the second to an online resource) have finished.

In this example I want countTheMovies to run at the end after my application has got all the information it needs and populated the divs. Instead it's running straight away.

I tried to delay it using an if condition, but with no joy. I've also tried with callbacks, but think I must be getting those wrong (I'm assuming callbacks are the answer). I'm aware of timed delays, but because in the actual project I'm sourcing 250+ movies (and because a timed delay seems like cheating) I thought I'd ask here instead.

Can anyone recommend JavaScript or jQuery code to fix this problem?

$(function(){
  getMovieList();
});

function getMovieList() {
  $.ajax({
    url: "movielist.json",
    type: "GET",
    dataType: "JSON",
    success: function(data) {
      for (var i = 0; i < data.length; i++) {
        var title = data[i].title.toLowerCase().split(" ").join("+");
        var year = data[i].year;
        i === data.length - 1
          ? getMovieInfo(title, year, true)
          : getMovieInfo(title, year, false);
      }
    }
  });
}

function getMovieInfo(title, year, isLast) {
  $.ajax({
    url: "https://www.omdbapi.com/?t=" + title + "&y=" + year + "&plot=short&r=json",
    type: "GET",
    crossDomain: true,
    dataType: "JSON",
    success: function(val) {
      if (!val.Error) {
        movie = title.replace(/[^a-z0-9\s]/gi, '');
        $("#app").append(
          // appending info to divs
        );
      }
    }
  });
  if (isLast) countTheMovies();
};

function countTheMovies() {
  $("#app").append("There are " + $(".movie").length + " movies.");
}

A plunker of my failings: https://plnkr.co/edit/0mhAUtEsaOUWhkZMJqma?p=preview

Possible duplicate of [How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Mike Cluck, Aug 08 '16 at 16:21
ternary is pointless, use this insatead.. `getMovieInfo(title, year, (i === data.length - 1))` — I wrestled a bear once., Aug 08 '16 at 16:27

score 2 · Answer 1 · answered Aug 08 '16 at 16:26

2

You've almost got it!

The same way that you call getMovieInfo in the success callback of getMovieList, you should be calling countTheMovies in the success callback of getMovieInfo.

answered Aug 08 '16 at 16:26

Matthew Herbst

29,477
23
85
128

Got it. Thanks for explaining! – dedaumiersmith Aug 08 '16 at 16:32

score 2 · Answer 2 · answered Aug 08 '16 at 16:26

As Jacob said above, move the countTheMovies call inside the AJAX request.

$(function(){
  getMovieList();
});

function getMovieList() {
  $.ajax({
    url: "movielist.json",
    type: "GET",
    dataType: "JSON",
    success: function(data) {
      for (var i = 0; i < data.length; i++) {
        var title = data[i].title.toLowerCase().split(" ").join("+");
        var year = data[i].year;
        i === data.length - 1 
          ? getMovieInfo(title, year, true) 
          : getMovieInfo(title, year, false);
      }
    }
  });
}

function getMovieInfo(title, year, isLast) {
  $.ajax({
    url: "https://www.omdbapi.com/?t=" + title + "&y=" + year + "&plot=short&r=json",
    type: "GET",
    crossDomain: true,
    dataType: "JSON",
    success: function(val) {
      if (!val.Error) {
        movie = title.replace(/[^a-z0-9\s]/gi, '');
        $("#app").append(
          // appending info to divs
        );
        if (isLast) countTheMovies();
      }
    }
  });
};

function countTheMovies() {
  $("#app").append("There are " + $(".movie").length + " movies.");
}

1

Thanks for the demo! – dedaumiersmith Aug 08 '16 at 16:33

score 1 · Accepted Answer · answered Aug 08 '16 at 16:25

1

Just put your countTheMovies() logic inside of the success callback of the AJAX request in getMovieInfo if you want it to run on success.

answered Aug 08 '16 at 16:25

Jacob

77,566
24
149
228

@Pamblam it's not. Look closely at the curly braces. – Matthew Herbst Aug 08 '16 at 16:26
That should have been obvious... and has the desired effect. Thank you! – dedaumiersmith Aug 08 '16 at 16:32

score 1 · Answer 4 · edited Aug 08 '16 at 20:45

1

You can call your countTheMovies() function from inside the success field of your Ajax call. This way it will make the function call when you intend it to.

edited Aug 08 '16 at 20:45

Peter Mortensen

30,738
21
105
131

answered Aug 08 '16 at 16:27

Justin

154
1
17

score 0 · Answer 5 · answered Aug 08 '16 at 16:34

Try out this

$(function(){
      getMovieList();
    });

    function getMovieList() {
    $.when( $.ajax({
        url: "movielist.json",
        type: "GET",
        dataType: "JSON",
        success: function(data) {
          for (var i = 0; i < data.length; i++) {
            var title = data[i].title.toLowerCase().split(" ").join("+");
            var year = data[i].year;
            i === data.length - 1 
              ? getMovieInfo(title, year, true) 
              : getMovieInfo(title, year, false);
          }
        }
      }) ).then(function( data, textStatus, jqXHR ) {
      countTheMovies();
    });
    }

      function getMovieInfo(title, year, isLast) {
      $.ajax({
        url: "https://www.omdbapi.com/?t=" + title + "&y=" + year + "&plot=short&r=json",
        type: "GET",
        crossDomain: true,
        dataType: "JSON",
        success: function(val) {
          if (!val.Error) {
            movie = title.replace(/[^a-z0-9\s]/gi, '');
            $("#app").append(
              // appending info to divs
            );
          }
        }
      });
    };
    function countTheMovies() {
      $("#app").append("There are " + $(".movie").length + " movies.");
    }

Hi @urvashi, thanks for the advice and introducing me to some new code! I can't test it at the moment but why do you recommend using "when" and "then" rather than simply moving my call (as per the answers below)? — dedaumiersmith, Aug 08 '16 at 17:16
Then and wen are part of promises,that is like-it promise(ensures)the code will run after success/error execution of Ajax requests :) — misss-popcorn, Aug 08 '16 at 17:19
Unless I've misquoted you it doesn't seem to work for large amounts of data: http://plnkr.co/edit/0mhAUtEsaOUWhkZMJqma?p=preview (if you search for the console.log message, "there are x movies", it pops up about halfway through the cycle. — dedaumiersmith, Aug 08 '16 at 18:16

JavaScript/jQuery callback using Ajax

5 Answers5