無法使用Ajax在我的網頁上顯示JQUERY API數據

Question

我想要在Twitch.TV上使用AJAX在JQuery中的網頁上自動顯示某些拖放。我附加了AJAX以匹配所選用戶的數量。但是，這些特定的用戶名不會顯示。該代碼吐出以下.....

AllOnlineOffline

•名稱：未定義，標誌：未定義

•名稱：未定義，標誌：未定義

•名稱：定義，標識：未定義

•名稱：定義，標識：未定義

•名稱：未定義，標誌：未定義

•名稱：未定義，標誌：未定義

•名稱：未定義，標誌：未定義

•名稱：未定義，標誌：未定義

.....另外，我檢查控制檯。它顯示API正在與匹配的用戶數連接。但是，我無法讓用戶展示。它只是顯示了網頁上面的內容。我需要這些綵帶，[「ESL_SC2」，「OgamingSC2」，「cretetion」，「freecodecamp」，「storbeck」，「habathcx」，「R obotCaleb」，「noobs2ninjas」]。任何人都可以告訴我如何在AJAX中追加數據，以便將其填充到我的網頁上？這是我的代碼。

var $users = $('#users'); 
var users =  
["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "R obotCaleb", "noobs2ninjas"]; 
var onlineChannels = []; 
var offlineChannels = []; 
var url = 'https://api.twitch.tv/kraken/streams/jsonp'; 
$.each(users, function(i, users) { 
    $.ajax({ 
     type: 'GET', 
     url: 'https://api.twitch.tv/kraken/users/freecodecamp', 
     headers: { 
     'Client-ID': 'qubvi0p9dicv87g9a4s7etay32x6504' 
     }, 
     success: function(data) { 

     $users.append('<li>name: ' + users.name + ', logo: ' + users.logo  
+ '</li>').append('<br>').html(); 
     console.log(data); 
     } 

    } 

) 

}) 

<script> 
<div class="text-center"> 
<img src="http://siliconangle.com/files/2013/04/twitch-tv-logo-  
lightning.jpg"> 
</div> 
<div class="container-fluid text-center"> 
    <div class="container"> 
    <table> 
    <br> 
     <button id="allChannels" class="btn btn-primary">All</button> 
     <button id="Online" class="btn btn-primary">Online</button> 
     <button id="Offline" class = "btn btn-primary">Offline</button> 
     </br> 
    </table> 
    </div> 
    <div class="search-container"> 
    <form> 
     <input type="text"></input> 
    </form> 
    </div> 
<div class="streamers-container"> 
    <ul id="users"> 

    </ul> 
</div> 
</div> 
</script> 

Answer 1

首先的綁定問題，你不及格循環時用戶名的正確迭代。其次，你引用了返回的json對象錯誤。

嘗試這種情況：

(function() { 
var $users = $('#users'); 
var users =  
["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "R obotCaleb", "noobs2ninjas"]; 
var onlineChannels = []; 
var offlineChannels = []; 
var url = 'https://api.twitch.tv/kraken/streams/jsonp'; 
for (var i=0; i < users.length; i++) { 
    $.ajax({ 
     type: 'GET', 
     url: 'https://api.twitch.tv/kraken/users/' + users[i], 
     headers: { 
     'Client-ID': 'qubvi0p9dicv87g9a4s7etay32x6504' 
     }, 
     success: function(data) { 

     $users.append('<li>name: ' + data.display_name + ', logo: ' + data.logo + '</li>').append('<br>').html(); 
     console.log(data); 
     } 

    } 

) 

} 
})(); 

見我的工作示例的jsfiddle：https://jsfiddle.net/fictus/7xrnL5n7/

Answer 2

也許是因爲你使用的用戶的所有元素，併爲每個元素

$.each(users, function(i, users) { 
.... 
} 

嘗試改變它變成

$.each(users, function(i, user) { 
.... 
}