Question

我正试图让Twitch.TV上的某些流媒体在JQuery中使用AJAX自动显示在我的网页上。我添加了AJAX以匹配所选用户的数量。但是，不显示这些特定用户名。代码吐出以下内容.....

AllOnlineOffline

•name：undefined，logo：undefined

.....而且，我检查了控制台。它显示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) {
....
}

无法使用Ajax在我的网页上显示JQUERY API数据

2 个答案: