TwitchTV - Chaining asynchronous requests...help!

Hi guys :slight_smile:
Iā€™m working on the Twitch TV project and having issues with chaining two AJAX requests within a loopā€¦itā€™s not working!
(Please see under the ā€˜Populate DOM with exsisting channelsā€¦ā€™ section of my Javascript)
Both requests work fine on their own, but the second request relies on the response of the first request so Iā€™d like to prevent the second request from firing until the first request has been resolved. Is this possible? Is there a better way? Iā€™ve been pulling my hair out! What am I doing wrong?
Any help very much appreciated! :smile:
http://codepen.io/ollybolland/pen/NdqBXY?editors=1010

How about using channels.forEach() instead of a for-loop?

I also tried this and it seems to work:

  • Instead of setting an onOff variable to "Online" or "Offline" in the callback, I returned those strings.
  • Then in the callback function of the next .then(), I supplied an onOff parameter.
$.getJSON('url')
  .then(function(data) {
    // You can also reduce this to
    // `return data.stream ? "Online" : "Offline";`
    if (data.stream == null) return 'Offline'
    else return 'Online'
  })
  .then(function(onOff) {
    // ... use `onOff` here as usual
  });

Thanks for your response Kev.
I used channels.forEach() on a fork and itā€™s far simpler. Itā€™s genius actually! Canā€™t believe I havenā€™t come across it before.
Itā€™s now populating all the channel information as it should, however the Online/Offline functionality still isnā€™t working properly. Generally theyā€™re all offlineā€¦sometimes theyā€™re all online. Occasionally it gets it right, most the time it gets it wrong. Any idea why?
I havenā€™t tried returning ā€œonlineā€ ā€œofflineā€ instead of setting a variable because I donā€™t really understand it! Would you mind explaining it in a little more detail? Sorry to be a pain!
Hereā€™s where Iā€™m currently atā€¦
http://codepen.io/ollybolland/pen/dNowdJ?editors=1010

Itā€™s because your JSON requests finish at different times. One request might finish faster than the next, or one request might finish faster than the previous, etc. So your onOff variable gets reassigned rather unpredictably.

When you chain .then calls, the return value of the previous callback will be passed as argument to the next.

$getJSON(...)
  .then(function(data) { // this `data` contains the JSON
     // ..
     return 'Hello';
  })
  .then(function(data) { // this `data` is whatever the return value of the previous callback
     console.log(data); // should print `Hello`
  });

In the callback that sets "Offline" or "Online", try returning a value (say, "Hello"), then in the next callback, try adding console.log(data);. You should see several "Hello"s logged there. Now try returning "Online" or "Offline" instead assigning to the onOff variable. You should see both in the console.

Excellent Kev, now I finally understand!
Thanks for such a clear explanation :+1:

Iā€™m making slow but steady progressā€¦there are a few bugs but I think I can solve them.
Iā€™m having one major issue however which Iā€™m hoping you can help me get to the bottom ofā€¦

There is an if statement within the first AJAX request of the loadAllData loop. Iā€™m trying to push current channel into either the online or offline variable (depending on whether the channel is online or offline) so I can have an array of all the offline channels and an array of all the online channels.
The ā€˜All / online / offline buttonsā€™ section at the bottom relies on this information.

The code looks good to me but itā€™s not working so Iā€™ve obviously got something wrong! Any help is much appreciated :slight_smile:
http://codepen.io/ollybolland/pen/QdjbdN?editors=1010