Use the Twitchtv JSON API

In this example below you will see how to do a Use the Twitchtv JSON API with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by fulvi0, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright fulvi0 ©
  • HTML
  • CSS
  • JavaScript
        <div class="container">
  <div class=row>
    <div class="col-md-9">
      <div class="panel panel-defaul">
        <div class="panel-heading">
          <p align="center"><i class="fa fa-twitch fa-5x" aria-hidden="true"></i></p>
          <h3 align="center">Use the Twitchtv JSON API</h3>
        </div>
        <div class="panel-body">
          <table class="table table-hover table-responsive">
            <thead>
              <tr>
                <th>Gravatar</th>
                <th>Name</th>
                <th>Status</th>
                <th>Streaming <i class="fa fa-spinner fa-pulse fa-fw"></i> </th>
              </tr>
            </thead>
            <tbody id="twitchData">

            </tbody>
          </table>
        </div>
        <div class="panel-footer" align="center">
          <a href="http://carlosantonio.me/">Carlos Antonio</a> | 
          <a href="https://freecodecamp.com/">FreeCodeCamp</a> | 06/2016</div>
      </div>
    </div>
  </div>
</div>
    

/*Downloaded from https://www.codeseek.co/fulvi0/use-the-twitchtv-json-api-OXPZdY */
        body {
  margin: auto;
  width: 60%;
  padding: 20px;
  background-color: #140C21;
}

/* Centralize all object inside the table */
.table > tbody > tr > td {
  vertical-align: middle;
}

table,
thead,
tr,
tbody,
th,
td {
    text-align: center;
}

/* Gravatar dimensions */
img {
  width: 90px;
  height: 90px;
}
    

/*Downloaded from https://www.codeseek.co/fulvi0/use-the-twitchtv-json-api-OXPZdY */
        $(document).ready(function() {
  var userList = ["ESL_SC2", 
                  "OgamingSC2", 
                  "cretetion", 
                  "freecodecamp", 
                  "storbeck", 
                  "habathcx", 
                  "RobotCaleb", 
                  "noobs2ninjas", 
                  "comster404", 
                  "brunofin"];
  var streamsLink = 'https://api.twitch.tv/kraken/streams/';
  var usersLink = 'https://api.twitch.tv/kraken/users/';

  // passing each value to the api url
  userList.forEach(function(value) {
    twitchData(value);
  });

  function twitchData(userList) {
    var userURL = usersLink + userList + '?callback=?';
    var streamURL = streamsLink + userList + '?callback=?';

    $.getJSON(streamURL, function(streamData) {
      
      // existent user but not streamming at the time
      if (streamData.stream === null) {
        $.getJSON(userURL, function(userData) {
          var logo = userData.logo;
          var name = userData.display_name;

          $("#twitchData").append(
            "<tr>" +
            "<td>" + "<img src='" + logo + "'class='img-circle'>" + "</td>" +
            "<td>" + name + "</td>" +
            "<td id='twitchStatus'>" + "<i class='fa fa-toggle-off fa-2x' aria-hidden='true'></i>" + "</td>" +
            "<td align='center'>" + "</td>" +
            "</tr>");
        });
        // nonusers and users with close accounts
      } else if (streamData.status === 422 || streamData.status === 404) {
        var message = streamData.message;
        var error = streamData.error;
        var unknownLogo = 'https://goo.gl/x9uvGF';

        $("#twitchData").append(
          "<tr class='danger'>" +
          "<td>" + "<img src='" + unknownLogo + "'class='img-circle'>" + "</td>" +
          "<td>" + "</td>" +
          "<td id='twitchStatus'>" + error + "</td>" +
          "<td align='center'>" + message + "</td>" +
          "</tr>");
      } else {
        
        // Active users - streaming
        var logo = streamData.stream.channel.logo;
        var game = streamData.stream.channel.game;
        var name = streamData.stream.channel.display_name;
        var status = streamData.stream.channel.status;
        var link = streamData.stream.channel.url;

        $("#twitchData").prepend(
          "<tr class='success'>" +
          "<td>" + "<img src='" + logo + "'class='img-circle'>" + "</td>" +
          "<td>" + "<a href='" + link + "'target='_blank'>" + name + "</a>" + "</td>" +
          "<td>" + "<i class='fa fa-toggle-on fa-2x' aria-hidden='true'></i>" + "</td>" +
          "<td align='center'><strong>" + game + "</strong><br>" + status + "</td>" +
          "</tr>");
      }
    });
  }
});
    

Comments