Ajax를 사용하여 내 웹 페이지에 JQUERY API 데이터를 표시하는 데 문제가 발생했습니다.

Question

JQuery에서 AJAX를 사용하여 내 웹 페이지에 자동으로 표시 할 Twitch.TV의 특정 깃발을 얻으려고합니다. 선택한 사용자의 수와 일치하도록 AJAX를 추가했습니다. 그러나 이러한 특정 사용자 이름은 표시되지 않습니다. 코드는 이름 • 다음과 같은 .....

AllOnlineOffline

을 뱉어 : 정의되지 않은, 로고 : 정의되지 않은, 로고 : 이름 •

을 정의되지 않은 : 정의되지 않은, 로고 이름 •

을 정의되지 않은 : 정의되지 않은, 로고 :

정의되지 않은 이름 • : 정의되지 않은, 로고 :

0 정의되지 않은 이름 •

을 정의되지 않은 이름 •

: 정의되지 않은, 로고 : 정의되지 않은, 로고 : 이름 •

을 정의되지 않은 : 정의되지 않은, 로고 : 이름 •

을 정의되지 않은

을 정의되지 않은

..... 또한, 나는 콘솔을 확인 . 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

첫째로를 변경하는

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

시도에 대해 사용자를 사용하는 원인 바인드 문제, 당신은 통과되지 않습니다 루핑 할 때 사용자 이름의 올바른 반복. 둘째, 반환하는 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, user) { 
.... 
}