How to run code after separate ajax calls have completed within an each loop

Question

My HTML code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <ul id="output">
    <template id="list-template">
      <a href="{{url}}" target="_blank">
        <li>
          <p><strong>{{name}}</strong></p>
          <p><img src="{{logo}}" alt="{{name}} logo"></p>
        </li>
      </a>
    </template>
  </ul>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>

</body>
</html>

My JS code:

 $( document ).ready(function() {

  var $ul = $('#output');
  var listTemplate = $('#list-template').html();
  var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  var allStreams = [];
  var arr = [];


  $.each(channels, function(i, channelName){
    var xhr = $.ajax({
      url: 'https://wind-bow.gomix.me/twitch-api/streams/' + channelName,
      dataType: 'jsonp',
      success: function(data) {

        if (data.stream) { // i.e. if it's not null and currently streaming
          allStreams[i] = {
            name: data.stream.channel.display_name,
            url: data.stream.channel.url,
            logo: data.stream.channel.logo,
            status: data.stream
          };
        } else { // i.e. it's not currently streaming, do a separate request to get the channel info.
          $.ajax({
            url: 'https://wind-bow.gomix.me/twitch-api/channels/' + channelName,
            dataType: 'jsonp',
            success: function(channelData) {
              allStreams[i] = {
                name: channelData.display_name,
                url: channelData.url,
                logo: channelData.logo
              };
            } // close inner success
          }); // close inner $.ajax()
        } // close else
      } // close outer success
    }); // close outer $.ajax()
    arr.push(xhr);


  }); // close $.each()

  console.log(allStreams);

  $.when.apply($, arr).then(function(){
    $.each(allStreams, function(i, stream) {
      $ul.append(Mustache.render(listTemplate, stream));
    });
  })

/* deleted accounts
  - brunofin
  - comster404
*/



}); // close .ready()

I need the following code to run after the outer and inner ajax requests have completed all of their iterations:

$.each(allStreams, function(i, stream) {
  $ul.append(Mustache.render(listTemplate, stream));
});

As you might notice, I've tried implementing the advice here: Is it possible to run code after all ajax call completed under the for loop statement?

...but that seems only to work when there is just one ajax call in the $.each() loop.

How do I get this to work with two separate ajax requests within my $.each() loop, each with multiple iterations? Currently only the live streams delivered by the outer ajax iterations are showing in my list.

the code isn't that big - put it **in the question** – Jaromanda X Jan 21 '17 at 06:36 — Jaromanda X, Jan 21 '17 at 06:36

Jaromanda X · Accepted Answer · 2017-01-24T08:00:06.120

Use the fact that $.ajax returns a promise to your advantage.

in .then callback, returning a value resolves the promise returned by .then - however, returning a Promise will mean that .then will wait on the returned Promise and resolve to that value

This also means, by using Array#map, no need for pushing to an array or array[i] = whatever type code - it's all handled by the .map and the resolved value of the promises

$(document).ready(function() {
    var $ul = $('#output');
    var listTemplate = $('#list-template').html();
    var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
    var arr = channels.map(function(channelName) {
        return $.ajax({
            url: 'https://wind-bow.gomix.me/twitch-api/streams/' + channelName,
            dataType: 'jsonp'
        }).then(function(data) {
            if (data.stream) { // i.e. if it's not null and currently streaming
                return {
                    name: data.stream.channel.display_name,
                    url: data.stream.channel.url,
                    logo: data.stream.channel.logo,
                    status: data.stream
                };
            } else { // i.e. it's not currently streaming, do a separate request to get the channel info.
                return $.ajax({
                    url: 'https://wind-bow.gomix.me/twitch-api/channels/' + channelName,
                    dataType: 'jsonp'
                }).then(function(channelData) {
                    return {
                        name: channelData.display_name,
                        url: channelData.url,
                        logo: channelData.logo
                    };
                });
            }
        });
    });

    $.when.apply($, arr).then(function() {
        var allStreams = [].slice.call(arguments);
        $.each(allStreams, function(i, stream) {
            $ul.append(Mustache.render(listTemplate, stream));
        });
    });
});

Thanks Jaromanda X, that seems like some high-level stuff. I've been trying to fill in my knowledge gap with regards to promises so I can properly understand your answer. However, when I plug in your code I am getting the error: jQuery.Deferred exception: Cannot read property 'stream' of undefined TypeError: Cannot read property 'stream' of undefined... I notice that you are trying to assign the results[0] to the data variable, however, isn't results an object? — user3382405, Jan 22 '17 at 09:55
I seemed to have gotten your code to run by removing these two lines: var channelData = results[0]; var channelData = results[0]; and changing the results variable to 'data' and 'channelData' respectively. Although it works, I'd like to understand what purpose the removed code was serving? — user3382405, Jan 24 '17 at 07:54
damn ... I wish I could get jQuery promises straight in my head!!! Maybe the values differ in different releases or something - sorry about that — Jaromanda X, Jan 24 '17 at 07:56
I've edited the answer so that it's CORRECT ... I'm sure I edited one like it before where I had to do it different :p — Jaromanda X, Jan 24 '17 at 08:00

score 0 · Answer 2 · answered Jan 21 '17 at 07:01

I was thinking of using promise based solution, but your scenario seems to be solved by adding 2 if clause(can be reduced to 1 if used promise). I have put your render logic in a function and calling that when all ajax request comlpleted, that's it.

 $( document ).ready(function() {

var $ul = $('#output');
var listTemplate = $('#list-template').html();
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var allStreams = [];
var arr = [];

$.each(channels, function(i, channelName){

var xhr = $.ajax({
  url: 'https://wind-bow.gomix.me/twitch-api/streams/' + channelName,
  dataType: 'jsonp',
  success: function(data) {

    if (data.stream) { // i.e. if it's not null and currently streaming
      allStreams[i] = {
        name: data.stream.channel.display_name,
        url: data.stream.channel.url,
        logo: data.stream.channel.logo,
        status: data.stream
      };
      if(channels.length === allStreams.length){
        allStreamsFetched();
      }

    } else { // i.e. it's not currently streaming, do a separate request to get the channel info.
      $.ajax({
        url: 'https://wind-bow.gomix.me/twitch-api/channels/' + channelName,
        dataType: 'jsonp',
        success: function(channelData) {

          allStreams[i] = {
            name: channelData.display_name,
            url: channelData.url,
            logo: channelData.logo
          };

          if(channels.length === allStreams.length){
            allStreamsFetched();
          }
        } // close inner success
      }); // close inner $.ajax()
    } // close else
  } // close outer success
}); // close outer $.ajax()
arr.push(xhr);


}); // close $.each()


function allStreamsFetched(){
 console.log(allStreams);
 $.each(allStreams, function(i, stream) {
 $ul.append(Mustache.render(listTemplate, stream));
});
 }

});

`I was thinking of using promise based solution` - you mean like in the question itself ... `$.when` is a jQuery Promise "version" of Promise.all :p — Jaromanda X, Jan 21 '17 at 07:06
also `if(channels.length === allStreams.length){` is no guarantee if, say the last call to "streams" gets a stream, but say, the second to last doesn't and still needs to wait for "channels" to complete ... `allStreams.length` will be equal to `channels.length`, however the second to last "slot" in `allStreams` will be empty - you would need to introduce a separate counter, incremented when a `allStreams` item gets added — Jaromanda X, Jan 21 '17 at 07:08

How to run code after separate ajax calls have completed within an each loop

2 Answers2