I am working on the Twitch Streamers app (freecodecamp project) where I have to show online and offline users. I think something is wrong with the way I wrote the loop for each username in the array because everytime I pressed the Online or Offline button, it keeps looping through and create another list of users. Can anyone tell me how to fix it? Thank you! Here is my JS code:
$(document).ready(function(){
var client_id = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
var api = 'https://wind-bow.gomix.me/twitch-api/streams/';
var newHTML=[];
$.each(client_id,function(i,val){
var stream_link = api + val + '?callback=?';
$.getJSON(stream_link,function(data){
$("#all_users").click(function(){
newHTML.push('<span>' + val + '</span>');
$("#display").html(newHTML.join(" "));
})
//$("#display").empty;
if (data.stream == null){
$("#offline").click(function(){
newHTML.push('<span>' + val + '</span>');
$("#display").html(newHTML.join(" "));})
}
else{
$("#online").click(function(){
newHTML.push('<span>' + val + '</span>');
$("#display").html(newHTML.join(" "));
})
}
})
})
})
And here is the link of the rough draft of my project: https://codepen.io/cmtran/pen/QgXbWK
