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? — Mike Cluck
– Mike Cluck, Commented Aug 8, 2016 at 16:21
ternary is pointless, use this insatead.. getMovieInfo(title, year, (i === data.length - 1)) — I wrestled a bear once.
– I wrestled a bear once., Commented Aug 8, 2016 at 16:27

Matthew Herbst · Accepted Answer · 2016-08-08 16:26:04Z

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 8, 2016 at 16:26

Matthew Herbst

32.3k27 gold badges92 silver badges141 bronze badges

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

1 Comment

dedaumiersmith Over a year ago

Got it. Thanks for explaining!

Cameron · Accepted Answer · 2016-08-08 16:26:19Z

2

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.");
}

answered Aug 8, 2016 at 16:26

Cameron

6944 silver badges16 bronze badges

1 Comment

dedaumiersmith Over a year ago

Thanks for the demo!

Jacob · Accepted Answer · 2016-08-08 16:25:11Z

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 8, 2016 at 16:25

Jacob

79k24 gold badges159 silver badges245 bronze badges

2 Comments

Matthew Herbst Over a year ago

@Pamblam it's not. Look closely at the curly braces.

dedaumiersmith Over a year ago

That should have been obvious... and has the desired effect. Thank you!

Peter Mortensen · Accepted Answer · 2016-08-08 20:45:25Z

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 8, 2016 at 20:45

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 8, 2016 at 16:27

Justin

1542 silver badges19 bronze badges

Comments

misss-popcorn · Accepted Answer · 2016-08-08 16:34:39Z

0

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.");
    }

answered Aug 8, 2016 at 16:34

misss-popcorn

6103 silver badges14 bronze badges

4 Comments

dedaumiersmith Over a year ago

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

misss-popcorn Over a year ago

Then and wen are part of promises,that is like-it promise(ensures)the code will run after success/error execution of Ajax requests :)

dedaumiersmith Over a year ago

Okay, I'll give it a try. Thanks again!

dedaumiersmith Over a year ago

Unless I've misquoted you it doesn't seem to work for large amounts of data: 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.

Collectives™ on Stack Overflow

JavaScript/jQuery callback using Ajax

5 Answers 5

1 Comment

1 Comment

2 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

2 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related