Dtrain Dtrain - 5 months ago 41
Ajax Question

Trouble getting JQUERY API data to display on my webpage using Ajax

I am trying to get certain streamers on Twitch.TV to display automatically on my webpage using AJAX in JQuery. I appended the AJAX to match the number of users chosen. However, those specific user names do not display. The code spits out the following.....

AllOnlineOffline

•name: undefined, logo: undefined

•name: undefined, logo: undefined

•name: undefined, logo: undefined

•name: undefined, logo: undefined

•name: undefined, logo: undefined

•name: undefined, logo: undefined

•name: undefined, logo: undefined

•name: undefined, logo: undefined

.....Also, I checked the console. It shows the API is connecting with the matching number of users. Yet, I can't get the users to display. It just shows what's above on the webpage. I need these streamers, ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "R obotCaleb", "noobs2ninjas"], to be displayed instead. Can anyone tell me how to append the data in AJAX so it populates on my webpage? Here is my code.

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

First of all, you are not passing the right iteration of the user name when looping. Second, you are referencing the returning json object wrong.

Try this:

(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);
      }

    }

  )

}
})();

See my working example jsfiddle: https://jsfiddle.net/fictus/7xrnL5n7/

Comments