爲什麼陣列失去它的價值？

我試圖建立一個使用twitch api的列表，當用戶想要查看誰在流式傳輸，誰不在時更新列表。例如，當我按下脫機按鈕時，列表應該只包含「流」值爲空的用戶。這裏是我的html：爲什麼陣列失去它的價值？

<div class="container-fluid"> 
    <div id="menu"> 
    <ul class="menubar"> 
     <li><a id="all" href="#">All</a></li> 
     <li><a id="online" href="#">Online</a></li> 
     <li><a id="offline" href="#">Offline</a></li> 
    </ul> 
    <div id="users"> 
     <ul class="members"> 
     </ul> 
    </div> 
    </div> 
</div>

這裏是我的JavaScript（用jQuery已經導入）：

var users = ["MedryBW", "freecodecamp", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"]; 

var listOffline = []; 

$(document).ready(function(){ 
    $.each(users, function(i , val){ 
     $('.members').append("<li>" + val + "</li>"); 
    }); 

    $('#offline').on('click', function(){ 
    $.each(users, function(i , val){ 
     $.getJSON("https://api.twitch.tv/kraken/streams/" + val , function(data){ 
      if(data['stream'] == null) { 
      listOffline.push(val); 
      } 
     }); 
    }); 
    $('.members li').remove(); 
    $.each(listOffline, function(i , val) { 
     $('.members').append("<li>" + val + "</li>"); 
    }); 

    }); 

});

爲什麼「listOffline」陣列失去在第一年底推到它的價值。 $（'＃offline'）。on（'click'）函數中的每個塊？任何幫助解決這個問題將不勝感激

來源

2015-09-28 Matt

問題是，你正試圖追加列表之前它填充。因爲$ .getJSON是一個異步函數。另外請注意，在循環訪問用戶之前，您需要調用remove函數來清空列表。

你應該附加在成功回調函數

$('#offline').on('click', function(){ 
$('.members li').remove(); 
    $.each(users, function(i , val){ 
     $.getJSON("https://api.twitch.tv/kraken/streams/" + val , function(data){ 
      if(data['stream'] == null) { 
      listOffline.push(val); 
      $('.members').append("<li>" + val + "</li>"); 
      } 
     }); 
    });

來源

2015-09-28 20:16:11 Dola

這是接近，但在調用'$（「會員禮。」）刪除（）;'將導致只需要添加的最後一個項目。（因爲所有其他人都剛剛被刪除） – pherris

我剛剛編輯它，它現在在調用$之前刪除成員列表。每個 – Dola

這是更好的，但你會最終得到像「MedryBW」，「MedryBW」，「freecodecamp」，「MedryBW」，「freecodecamp」，「storbeck」（大量重複），因爲整個陣列是附加到每個循環的'ul'上 - 您無法循環訪問'listOffline'並追加到此回調中的DOM中。 – pherris

的getJSON調用是異步的名單，所以在回調代碼中的下一個.each後執行。嘗試將最後.each回調的內部：

$('#offline').on('click', function(){ 
    $('.members li').remove(); 
    $.each(users, function(i , val){ 
    $.getJSON("https://api.twitch.tv/kraken/streams/" + val).done(function(data){ 
     if (data['stream'] == null) { 
     listOffline.push(val); 
     $('.members').append("<li>" + val + "</li>"); 
     } 
    }); 
});

您還可以使用遞延.done讓事情變得乾淨了一點。

來源

2015-09-28 20:18:39 pherris

我的猜測是$ .getJson是異步的，這意味着您的最後一個循環在服務器返回所有結果之前已經到達並執行，因此您正在處理部分列表。

爲了驗證這一點添加下面的打印輸出：

在處理該$ .getJson響應塊，條件之前：

console.log('user ', val, ' retrieved);

，只是你的最後循環之後：

console.log('offline list processed');

您可能會看到在處理完您的列表後，用戶將被檢索（+處理和推送）。

如果這是你可以做以下的一個情況：

使用的承諾，並執行最後只有當他們完成
或者更簡單，當你得到一個結果每個循環，而不是將其推到一個數組，只是做：
```
$('.members').append("<li>" + val + "</li>"); 
```

來源

2015-09-28 20:21:42 Meir

爲什麼陣列失去它的價值？

回答

相關問題