JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<div class="well">
<h1>Twitch.TV API</h1>
</div>
<div class="row">
<div class="col-sm-3 text-center">
Name
</div>
<div class="col-sm-9 text-center">
Status
</div>
</div>
<div class="channelContainer">
</div>
JavaScript
$streamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp",
"storbeck", "habathcx", "RobotCaleb",
"noobs2ninjas", "brunofin", "comster404", "zxcxxxxzzxxxxc"
];
$onlineChannels = [];
$offlineChannels = [];
$closedChannels = [];
$nonExistantChannels = [];
function getStreamInfo(callback) {
for ($i = 0; $i < $streamers.length; $i++) {
$.ajax({
name: $streamers[$i],
length: $streamers.length - 1,
index: $i,
func: callback,
url: 'https://api.twitch.tv/kraken/streams/' + $streamers[$i],
dataType: 'JSON',
success: function(data) {
if (data.stream != null) { //if there is stream information
//add to online channels
//console.log("its a streaming channel");
$chanInfo = {
"name": this.name,
"game": data.stream.game,
"status": data.stream.channel.status
};
$onlineChannels.push($chanInfo);
} else {
//add to offlineChannels
//console.log("currently not streaming");
$chanInfo = {
"name": this.name,
"status": "Offline"
};
$offlineChannels.push($chanInfo);
}
},
error: function(data) {
if (data.status === 422) {
//console.log('add to closedChannels');
$chanInfo = {
"name": this.name,
"status": "Account closed"
};
$closedChannels.push($chanInfo);
}
if (data.status === 404) {
//console.log('add to nonExistantChannels');
$chanInfo = {
"name": this.name,
"status": "Non existant channel"
};
$nonExistantChannels.push($chanInfo);
}
}, //end of error
complete: function() {
if (this.index === this.length) {
callback();
}
}
}); //end of ajax request
} //end of for loop
} //end of function
function displayChannels() {
...