CODEWITHSUNDEEP
javascriptarraysloops
Merim
Merim

Reputation: 1363

Filter array and append li items

I'm creating Twitch TV as Freecodecamp challenge. I'm trying to get online and offline channels, I get it but there is an issue when I'm trying to loop filtered array.

Problem is that looping through filtered array creates one addition li, and doubles one of array's element.

For example: ch1, ch2, ch3, ch4, ch5, ch5 and blank li.

Here is some code: 

function loopChannels(array) {
  for(var i=0; i<array.length;i++) {
    $("h3").eq(i).html(array[i].display_name);
    $(".logo").eq(i).attr("src", array[i].logo);
    $(".status").eq(i).html(array[i].status == null ? "offline" : array[i].status);
    $(".link").attr("target", "_blank");
    $(".link").eq(i).attr("href", array[i].url);
    a.append(title);
    li.append(img,a,stat);
    ul.append(li);
  }   
}

$("#online").on("click", function() {
  var online = channels.filter(c => c.status !== null);
  console.log(online.length);
  loopChannels(online);

});
$("#offline").on("click", function() {
  var offline = channels.filter(c => c.status == null);
  console.log(offline.length);
  loopChannels(offline);

});

EDIT: Channels array

Upvotes: 0

Views: 875

Answers (1)

Pranay Rana
Pranay Rana

Reputation: 176896

Fully working code : https://codepen.io/anon/pen/rdRzeq

Some of changes in orginal code are

  1. Made use of jquery to create element dynamically specially li and its child
  2. made use of empty() jquery function to clear out elements under UL , so it will show fresh list of online and offline channel based on criteria

based on code provided by you i created full jquery based code which is as below and its working 

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

var channels = [];
var online = [];


function loopChannels(array) {

var ul = document.querySelector(".streamers"); 

  array.forEach((ele,i)=> {

    var li = $("<li/>", {'class' : 'streamer'}).appendTo(ul);
    var img = $("<img />", {'class' : 'logo', "src": ele.logo}).appendTo(li);
    var stat = $("<p />", {'class' : 'status', "html": ele.status == null ? "offline" : ele.status}).appendTo(li);;
    var a = $("<a />",{'class' : 'link',"target": "_blank", "href": ele.url }).appendTo(li);
    var title = $("<h3/>",{'class' : 'strTitle','html':  ele.display_name }).appendTo(a);
  });
};


streamers.forEach(function(streamer) {
  $.getJSON("https://wind-bow.gomix.me/twitch-api/channels/" + streamer + "?callback=?", function(data) {
  channels.push(data);
    loopChannels(channels);
  });
});


$("#online").on("click", function() {
  var ul = document.querySelector(".streamers"); 
  $(ul).empty();
  var online = channels.filter(c => c.status !== null);
  console.log(online.length);
  loopChannels(online);

});

$("#offline").on("click", function() {
  var ul = document.querySelector(".streamers"); 
  $(ul).empty();
  var offline = channels.filter(c => c.status == null);
  console.log(offline.length);
  loopChannels(offline);
});

Upvotes: 1

Related Questions