Twitch TV JSON API

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>

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/

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

style.css

.logo {
  width:70px;
}

.online {
  background-color: #e6ffe6;
}
.offline {
  background-color:#e6f0ff
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

Twitch TV JSON API.markdown

Twitch TV JSON API

A Pen by Chanthy on CodePen.

License.