Hi guys
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!
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 anonOff
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
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
http://codepen.io/ollybolland/pen/QdjbdN?editors=1010