Only showing last item in array- Twitch JSON API

JavaScript
1

Hey guys, I’m trying to get my for loop to iterate through the array and output the images of each streamer. Currently, my code is only showing the last logo image(RobotCaleb) in the html. Thank you for any help in advance!

var streamerArray = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "noobs2ninjas", "RobotCaleb" ];

for (var i=0; i < streamerArray.length; i++) {
  
  var streamAPI = "https://wind-bow.gomix.me/twitch-api/streams/"
  var channelAPI = "https://wind-bow.gomix.me/twitch-api/channels/"
  var streamer = streamerArray[i];
  var streamurl = streamAPI + streamer + "?callback=?"
  var channelurl = channelAPI + streamer + "?callback=?"
$.getJSON(streamurl , function(data) {
  $.getJSON(channelurl, function(datachannel) {
  var streamerdisplay = data._links.channel.substr(38);
   var streamlink = "https://www.twitch.tv/" + streamerdisplay;
    var logos = datachannel.logo;
  if (data.stream == null) {
    $("#display").prepend("<li>" + "<div class=row offline>" + "<img src='"+ logos + "' class = 'logo'></img>" + "<a href ='" +streamlink+ "' " +"target=blank>" + streamerdisplay + "</a></div>" + "<br>" + "Offline" + "</br></li>")
  } 
  else if (data.stream !== null) {
   $("#display").prepend("<li>" + "<div class=row online>" + "<img src='"+ logos + "' class = 'logo'></img>" + "<a href ='" +streamlink+ "' " +"target=blank>" + streamerdisplay + "</a>" + "<br>" + "Online" + "</br></li>")    
 };
});  
});
};
3

you could use a foreach which will apply a function to each, that function doing what ever you need. Hope it Helps.

1 Like
4

Thanks! I changed the for loop to a forEach function and it works now!