Can you help me with the Twitch.tv API

Can you help me with the Twitch.tv API
0.0 0

#1

I am writing code for the Twitch.tv API project… and I think it is functioning. But I am very displeased with the way my code looks. There are too many lines of JS code and I am sure it could be made easier,but i cant seem to think of a simple solution that would solve it. Any advice on how to make my code be shorter? It seems a bit repetitive to me. Keep in mind I am a beginner and would like to solve this as simple as possible…

Here is my pen


#2

You are hardcoding too many things. What if the challenge was to have 1000 usernames? Would you really want to create 1000 info variables, 1000 counter variables, 1000 twitcher functions? When you see repetitive code, you almost always create a function which does the same thing and then call the function with a few arguments which represent the parts that are different.

I am not going to completely rework your project solution, because I am hoping you will learn from what I show you below to do it yourself. You have hard coded three p elements to represent the three usernames for which your JavaScript will display twitch API call results. Ideally, if you had a thousand usernames, it would be better to create these html elements dynamically with JavaScript, but for now I will just reducing the repetitive code in your twitcher functions and a few other variables.

Let’s see how we could reduce the 3 twitcher functions down to a single generic function which takes some arguments to handle the differences.

We’ll start with your current twitcher1 function (seen below):

function twitcher1() {
  var myURL = "https://wind-bow.glitch.me/twitch-api/streams/esl_sc2";
  $.getJSON(myURL, function(data) {
    info1 = data;
    if (info1.stream === null) {
      counter1 = "offline";
      document.getElementById("esl_sc2_name").innerHTML = "<a target='_blank' href='https://go.twitch.tv/esl_sc2'>" + "ESL_SC2" + "</a>";
      document.getElementById("esl_sc2_gametime").innerHTML = "Offline";
      document.getElementById("esl_sc2_game").innerHTML = "";
    } else if (info1.stream !== null) {
      document.getElementById("esl_sc2_name").innerHTML =
        "<a target='_blank' href='https://go.twitch.tv/esl_sc2'>" +
        info1.stream.channel.display_name + "</a>";

      document.getElementById("esl_sc2_gametime").innerHTML = info1.stream.channel.status;
      document.getElementById("esl_sc2_game").innerHTML = info1.stream.game;
    }
  });
}

At the bottom of this post you will see a refactored version of the above code where I created a more generalized function to make the twitch API calls and update the applicable html elements. As I mentioned at the start, you should not hard code the html elements with specific usernames, but since that was your current design I stuck with it. The only changes I had to make to your html section was make sure the usernames’ case was consistent across the three usernames and the div elements had the same post-fix (i.e name, gametime, and game). You had different post-fixes for each set of username ids, so I made them match for the function to work efficiently. One of the things I could not get to work without completely reworking your entire html structure was to get the counter variables to work with the function. My suggestion is to not use counter1, counter2, and counter3, but instead you should create special class names (i.e. “online” and “offfline”) to attach to the div ids inside the getJSON callback function and then use document.querySelectorAll(".online"), document.querySelectorAll(".offline") to hide and show the applicable divs based on the Online, Offline, and All buttons. This would be the easiest way to modify without completely redoing your existing structure.

If you end up trying what I have suggested and either have questions or get stuck, post more questions and someone will respond.

function twitcher(username) {
  var lowerCaseUsername = username.toLowerCase();
  var myURL = "https://wind-bow.glitch.me/twitch-api/streams/" + username;
  $.getJSON(myURL, function(data) {
    var userLink = "<a target='_blank' href='https://go.twitch.tv/" 
      + lowerCaseUsername + "'>" + username + "</a>";
    var gameTime = "Offline"; // assume offline (no stream)
    var game = ""; // assume offline (no stream)
    
    if (data.stream !== null) {
      userLink = "<a target='_blank' href='https://go.twitch.tv/" 
        + lowerCaseUsername + "'>" + data.stream.channel.display_name +"</a>";
      gameTime = data.stream.channel.status;
      game = data.stream.game;
    }
    document.getElementById(lowerCaseUsername + "_name").innerHTML = userLink;
    document.getElementById(lowerCaseUsername + "_gametime").innerHTML = gameTime;
    document.getElementById(lowerCaseUsername + "_game").innerHTML = game;
  });
}

// call the function three times with the applicable usernames
twitcher("ESL_SC2");
twitcher("FreeCodeCamp");
twitcher("OgamingSC2");