javascript - 过滤数组并附加 li 项

Question

我正在创建 Twitch TV 作为 Freecodecamp 挑战。我正在尝试获取在线和离线 channel ，我明白了，但是当我尝试循环过滤数组时出现问题。

问题是循环过滤数组会创建一个加法 li，并将数组元素之一加倍。

例如:ch1、ch2、ch3、ch4、ch5、ch5 和空白 li。

这是一些代码:

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);

});  

编辑: channel 数组

Answer 1

完全工作的代码:https://codepen.io/anon/pen/rdRzeq

原始代码的一些更改是

1. 使用jquery动态创建元素，特别是li及其子元素
2. 利用 empty() jquery 函数清除 UL 下的元素，因此会根据条件显示新鲜的线上和线下 channel 列表

根据您提供的代码，我创建了完整的基于 jquery 的代码，如下所示及其工作

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);
});