Thanks to everyone’s help, I was able to make successful get requests with promises, but I’ve hit another bump.
How do I make or use an existing function that lets me wait until I’ve gotten all data from Twitch’s API, then executes a function that appends data from those promises onto my webpage?
I’ve messed around with Promises.all
but I’m wondering if I can’t use p1
and p2
as deferreds because they’re chained. I also tried $.when().done()
but couldn’t use that properly either.
This is what I have so far. Here’s the codepen.
function APICallReturnsPromise(section, streamer) {
return new Promise(function(resolve) {
$.getJSON('https://wind-bow.hyperdev.space/twitch-api/' + section + '/' + streamer + '?callback=?', function(data) {
resolve(data);
}); // close getJSON
}) // close promise
} // close function
streamersArr.forEach(function(streamer) {
// this promise chains gets data for non existing accounts and offline users
var p1 = APICallReturnsPromise('streams', streamer)
// if data.status === 404, push not html for accounts that don't exist
// if data.stream === null, return promise for channels data
.then(function(data) {
if (data.status === 404) {
arr.push('<div class="result error row"><div class="col-xs-4 col-sm-2 col-md-2"><div class="pic"><img class="img-responsive" src="http://res.cloudinary.com/devvzv96d/image/upload/v1479131984/white-error-256_vix4cw.png"></div></div><div class="col-xs-6 col-sm-3 col-md-2 user result-text">' + streamer + '</div><div class="col-xs-8 col-sm-6 col-md-3 result-text"><em>Account does not exist</em></div></div>');
} // close if
else if (data.stream === null) {
return APICallReturnsPromise('channels', streamer);
}
}) // close then
// push html for offline accounts
.then(function(data) {
arr.push('<a target="_blank" href="' + data.url + '"><div class="result offline row"><div class="col-xs-4 col-sm-2 col-md-2"><div class="pic"><img class="img-responsive" src="' + data.logo + '"></div></div><div class="col-xs-6 col-sm-3 col-md-2 user result-text">' + data.display_name + '</div><div class="col-xs-8 col-sm-4 col-md-3 result-text"><em>Offline</em></div></div></a>');
}) // close then
// this promise chains gets data for online users
var p2 = APICallReturnsPromise('streams', streamer)
// if data stream is null, get channel data
.then(function(data) {
if (data.stream != null) {
return APICallReturnsPromise('channels', streamer);
}
}) // close then
// push html for online channels
.then(function(data) {
arr.push('<a target="_blank" href="' + data.url + '"><div class="result online row"><div class="col-xs-4 col-sm-2 col-md-2"><div class="pic"><img class="img-responsive" src="' + data.logo + '"></div></div><div class="col-xs-6 col-sm-3 col-md-2 result-text user">' + data.display_name + '</div><div class="col-xs-6 col-sm-4 col-md-3 result-text"><em>' + data.game + '</em></div><div class="status hidden-xs col-sm-9 col-md-9"><span style="font-size:.8em;"><em>' + data.status + '</em></span></div></div></a>');
}) // close then
}) // close foreach statement
I’m going to refactor my code that was suggesed by cjsheets once I get this working properly.
edit: I’m starting to wonder if incorporating promises is making things more complicated than they need to be…
update: I found a better to deal with asynchroncity than the setTimeout function. I didn’t use promises, but my app works. I think I’m going to refactor my code a bit more then move on… I’m a bit burnt out on this project. Thanks for the help guys, I learned a bit more about promises.