Twitch API Help - Iterating over multiple objects in one API call

Twitch API Help - Iterating over multiple objects in one API call
0

#1

I used a for loop to iterate through the list of twitch channels I want to display. I’ve now received three API responses within my call (which is great as previously I was doing one API call per channel). The problem I’m having now is I don’t know the best to iterate through my API responses to display whether the user is online/offline.

Below’s my code. When I console log data 2 I get three separate objects. I’m just not sure how to access them properly to display the game or display if the user is offline. Here’s my codepen: https://codepen.io/rgsoto/pen/aVRJYp?editors=1111

window.onload = function searchQuery() { 
  let baseUrl = 'https://wind-bow.gomix.me/twitch-api/channels/';
  let fullUrlEsl = baseUrl + 'ESL_SC2';
  let fullUrlOgaming = baseUrl + 'OgamingSC2';
  let fullUrlFcc = baseUrl + 'freecodecamp';
  let channels = ["ESL_SC2", "freecodecamp", "OgamingSC2"]
  
    for (var i = 0; i < channels.length; i++) {
     
     $.ajax ({
       type: 'GET',
       dataType: "jsonp",
       url: baseUrl + channels[i],
       success: function(dataI){
         //console.log(dataI);
          $.ajax({
            type: 'GET',
            dataType: "jsonp",
            url: 'https://wind-bow.gomix.me/twitch-api/streams/'+ dataI.name,}).done(function(data2){
            
            console.log(data2);
            
            if (data2.stream == null) {
               $("#ESL_SC2_stream").html('is offline');
               $("#OgamingSC2_stream").html('is offline');
               $("#freecodecamp_stream").html('is offline');
              } else {
                $("#ESL_SC2_stream").html(data2.stream.game);
                $("#OgamingSC2_stream").html(data2.stream.game);
                $("#freecodecamp_stream").html(data2.stream.game);
              }
            
            
       });
       }, 
       
       error: function (error) {
         alert("Error: User not found");
       }
       
     });
     
     
     
   }
    
};

#2

The following code is making all of the channels show the same status. Which status will it show? It will show the status of the very last API call response received back from the ajax calls. It can change every other time you run the code.

            if (data2.stream == null) {
               $("#ESL_SC2_stream").html('is offline');
               $("#OgamingSC2_stream").html('is offline');
               $("#freecodecamp_stream").html('is offline');
              } else {
                $("#ESL_SC2_stream").html(data2.stream.game);
                $("#OgamingSC2_stream").html(data2.stream.game);
                $("#freecodecamp_stream").html(data2.stream.game);
              }

During each ajax call, you get all the data you need to display the correct status for a particular channel. You know that data2.stream has the information you need to determine online/offline status. If you change your for loop from using var to let, then you know that channels[i] would contain the channel name. Based on how you have hard-coded the channel ids into your html divs, then you could use something like the following if data2.stream is equal to null:

if (data2.stream == null) {
  $("#" + channels[i] + "_stream").html('is offline');
}
else {
  $("#" + channels[i] + "_stream").html(data2.stream.game);
}

OR

let status;
if (data2.stream == null) {
  status = "is offline";
}
else {
  status =  data2.stream.game;
}
$("#" + channels[i] + "_stream").html(status);

OR using a ternary operator:

let status = data2.stream == null ? "is offline" : data2.stream.game;
$("#" + channels[i] + "_stream").html(status);