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

我正在尝试在Twitch.TV上获取某些彩带，以使用JQuery中的AJAX在我的网页上自动显示。我附加了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>

最佳答案

首先，循环时您没有传递正确的用户名迭代。其次，您引用的返回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/