Skip to content

Instantly share code, notes, and snippets.

@thydev

thydev/Twitch TV JSON API.markdown

Last active May 31, 2016 04:28
Show Gist options
  • Save thydev/7ebe2089bc3bb5cc331f2ccaf655e9ae to your computer and use it in GitHub Desktop.
Save thydev/7ebe2089bc3bb5cc331f2ccaf655e9ae to your computer and use it in GitHub Desktop.
Download ZIP
Twitch TV JSON API
Raw
index.html
<div class="container">
<div class="row">
<section class="col-xs-12">
<h1>Twitchtv JSON API</h1>
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="rdFilter" id="rdAll" value="all" checked> All
</label>
<label class="radio-inline">
<input type="radio" name="rdFilter" id="rdOnline" value="online"> Online
</label>
<label class="radio-inline">
<input type="radio" name="rdFilter" id="rdOffline" value="offline"> Offline
</label>
</div>
</section>
</div>
<div class="row">
<section class="col-xs-12">
<div class="list-group" id="listgroup">
<!--
<a href="#" class="list-group-item online">
<div class="media">
<div class="media-left">
<img src="https://static-cdn.jtvnw.net/previews-ttv/live_user_tsm_bjergsen-80x45.jpg"
class="media-object" alt=""/>
</div>
<div class="media-body">
<h2 class="media-heading">ESL SC2</h2>
<p>
Live
Star Craft II <img src="https://www.twitch.tv/images/xarth/g/g18_live.png"> <br>
2,343 Viewers <br>
Be prepared to hear me whine about NA soloq - VODS or Overwatch in queue
<footer class="text-left">
</footer>
</p>
</div>
<div class="media-left">
<img src="https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg"
class="media-objec img-circle logo" alt=""/>
</div>
</div>
</a>
<a href="#" class="list-group-item offline">
<div class="media">
<div class="media-left">
<img src="https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png"
class="img-circle logo" alt=""/>
</div>
<div class="media-body">
<h2 class="media-heading">FreeCodeCamp</h2>
<p>
We help you learn to code, then practice by building projects for nonprofits. Learn Full-stack JavaScript, build a portfolio, and get a coding job by joining our open source community at http://freecodecamp.com
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item">
<div class="media">
<div class="media-left">
<img src="http://s.jtvnw.net/jtv_user_pictures/hosted_images/GlitchIcon_purple.png"
class="img-circle logo" alt=""/>
</div>
<div class="media-body">
<h2 class="media-heading">FreeCodeCamp</h2>
<p>
We help you learn to code, then practice by building projects for nonprofits. Learn Full-stack JavaScript, build a portfolio, and get a coding job by joining our open source community at http://freecodecamp.com
</p>
</div>
</div>
</a>
<a href="#" class="list-group-item">
ESL_SC2
http://s.jtvnw.net/jtv_user_pictures/hosted_images/GlitchIcon_purple.png
http://s.jtvnw.net/jtv_user_pictures/hosted_images/GlitchIcon_WhiteonPurple.png
w2
</a>
<a href="#" class="list-group-item">
ESL_SC2
</a>
-->
</div>
</section>
</div>
</div>
Raw
script.js
var streams = ["ESL_SC2",
"OgamingSC2",
"cretetion",
"freecodecamp",
"storbeck",
"habathcx",
"RobotCaleb",
"noobs2ninjas",
"TSM_Bjergsen",
"Sing_sing"];
var streamsJSON = [];
/*
$.ajax({
type: 'GET',
url: 'https://api.twitch.tv/kraken/users/freecodecamp',
headers: {
'Client-ID': 'clgot94g7my38j97edrg5e1l2spx0ka'
},
success: function(data) {
console.log(data);
}
})
.fail(function(xhr, status, errorThrown) {
//alert( "Sorry, there was a problem!" );
console.log("Error: " + errorThrown);
console.log("Status: " + status);
console.dir(xhr);
});
*/
$("document").ready(function(){
$("#listgroup").html("");
loadStreams();
$("#rdAll").click(function(){
//alert($("input[name=rdFilter]:checked").val());
$("#listgroup").html("");
loadStreams();
});
$("#rdOnline").click(function(){
//alert($("input[name=rdFilter]:checked").val());
$("#listgroup").html("");
loadStreams();
});
$("#rdOffline").click(function(){
//alert($("input[name=rdFilter]:checked").val());
$("#listgroup").html("");
loadStreams();
});
});
function getAPI(streamName) {
//console.log(streamName);
$.ajax({
type: 'GET',
url: 'https://api.twitch.tv/kraken/users/' + streamName,
headers: {
'Client-ID': 'clgot94g7my38j97edrg5e1l2spx0ka'
},
success: function(data) {
var twitchURL = "https://www.twitch.tv/";
var twitchItem = '<a href="' + twitchURL +
'#url#" class="list-group-item offline" target="_blank">' +
'<div class="media">' +
'<div class="media-left">' +
'<img src="#logo#" class="img-circle logo" alt=""/>' +
'</div>' +
'<div class="media-body">' +
'<h2 class="media-heading">#name#</h2>' +
'<p>' +
'#bio#' +
'</p>' +
'</div>' +
'</div>' +
'</a>';
var liveItem = '<a href="' + twitchURL +
'#url#" class="list-group-item online" target="_blank">' +
'<div class="media">' +
'<div class="media-left">' +
'<img src="#liveImg#"' +
'class="media-object" alt=""/>' +
'</div>' +
'<div class="media-body">' +
'<h2 class="media-heading">#name#</h2>' +
'<p>' +
'<img src="https://www.twitch.tv/images/xarth/g/g18_live.png">' +
'LIVE ' +
'#game#' +
'<br>' +
'#viewers# Viewers <br>' +
'#status#' +
'</div>' +
'<div class="media-left">' +
'<img src="#logo#"' +
'class="media-objec img-circle logo" alt=""/>' +
'</div>' +
'</div>' +
'</a>';
//console.log(data);
//console.log(streamsJSON)
$.ajax({
type: 'GET',
url: 'https://api.twitch.tv/kraken/streams/' + streamName,
headers: {
'Client-ID': 'clgot94g7my38j97edrg5e1l2spx0ka'
},
success: function(ds) {
var rdSelected = $("input[name=rdFilter]:checked").val();
if (rdSelected == "all") {
if (ds.stream != null) {
//console.log(ds.stream);
//console.log(ds.stream.game, ds.stream.viewers,
// ds.stream.preview.medium,
// ds.stream.channel.status);
liveItem = liveItem
.replace("#url#", data.display_name)
.replace("#liveImg#", ds.stream.preview.small)
.replace("#name#", data.display_name)
.replace("#game#", ds.stream.game)
.replace("#viewers#", ds.stream.viewers.toLocaleString())
.replace("#status#", ds.stream.channel.status)
.replace("#logo#", data.logo);
$("#listgroup").append(liveItem);
} else {
twitchItem = twitchItem.replace("#url#", data.display_name)
.replace("#name#", data.display_name)
.replace("#bio#", data.bio != null ? data.bio : data.display_name)
.replace("#logo#", data.logo);
$("#listgroup").append(twitchItem);
}
} else if ( rdSelected == "online") {
if (ds.stream != null) {
//console.log(ds.stream);
//console.log(ds.stream.game, ds.stream.viewers,
// ds.stream.preview.medium,
// ds.stream.channel.status);
liveItem = liveItem
.replace("#url#", data.display_name)
.replace("#liveImg#", ds.stream.preview.small)
.replace("#name#", data.display_name)
.replace("#game#", ds.stream.game)
.replace("#viewers#", ds.stream.viewers.toLocaleString())
.replace("#status#", ds.stream.channel.status)
.replace("#logo#", data.logo);
$("#listgroup").append(liveItem);
}
} else if ( rdSelected == "offline") {
if (ds.stream == null) {
twitchItem = twitchItem.replace("#url#", data.display_name)
.replace("#name#", data.display_name)
.replace("#bio#", data.bio != null ? data.bio : data.display_name)
.replace("#logo#", data.logo);
$("#listgroup").append(twitchItem);
}
}
}
})
.fail(function(xhr, status, errorThrown) {
//alert( "Sorry, there was a problem!" );
console.log("Error: " + errorThrown);
console.log("Status: " + status);
console.dir(xhr);
});
//return data;
}
})
.fail(function(xhr, status, errorThrown) {
//alert( "Sorry, there was a problem!" );
console.log("Error: " + errorThrown);
console.log("Status: " + status);
console.dir(xhr);
//return "";
});
}
function loadStreams(){
//$("#listgroup").html("dara");
for(var stream in streams) {
//streamsJSON.push(getAPI(streams[stream]));
getAPI(streams[stream]);
}
console.log(streamsJSON.length, streamsJSON);
for(var s in streamsJSON){
//console.log(streamsJSON[s]);
}
}
//https://api.twitch.tv/kraken/streams/
//https://api.twitch.tv/kraken/channels/
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Raw
style.css
.logo {
width:70px;
}
.online {
background-color: #e6ffe6;
}
.offline {
background-color:#e6f0ff
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment