过滤数组并附加li项

时间:2018-04-11 06:26:46

标签: javascript arrays loops

我正在创建Twitch TV作为Freecodecamp挑战。我正在尝试获取在线和离线频道,我得到它但是当我尝试循环过滤数组时会出现问题。

问题是循环过滤后的数组会创建一个加法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);

});  

编辑:频道数组

1 个答案:

答案 0 :(得分:1)

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

原始代码的一些变化是

  1. 利用jquery动态创建元素li及其子
  2. 利用empty() jquery函数清除UL下的元素,因此会根据条件显示新的在线和离线频道列表
  3. 基于您提供的代码,我创建了基于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);
    });