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

Question

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

.....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>

users is an array of strings and each its member is a string which doesn't have .name or .logo properties. — Alex Kudryashev
– Alex Kudryashev, Commented Jun 21, 2016 at 20:14

fictus · Accepted Answer · 2016-06-21 20:08:44Z

1

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/

edited Jun 21, 2016 at 20:08

answered Jun 21, 2016 at 19:56

fictus

2862 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

shall Over a year ago

Your code is ok...You can also optimize the function in this way link

Dtrain Over a year ago

@fictus I had the 'for loop' in the wrong place on a previous code. Also, thanks for clarifying this..... $users.append('<li>name: ' + data.display_name + ', logo: ' + data.logo + '</li>').append('<br>').html(); console.log(data);..... because I also tried using 'display_name' but never entered data.display_name. So I appreciate that clarification as well.

Dtrain Over a year ago

@shall thanks for tweeking the code to make it more efficient. This is what I needed to better understand the format.

shall · Accepted Answer · 2016-06-21 19:46:27Z

0

Maybe it's a bind problem cause you used users for all elements and for each element

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

try to change it into

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

answered Jun 21, 2016 at 19:46

shall

1549 bronze badges

1 Comment

Dtrain Over a year ago

thank you. However, I made the change as you suggested. I also made this change.....$users.append('<li>name: ' + user.name + ', logo: ' + user.logo + '</li>').append('<br>').html(); console.log(data);.....and it still shows the same results. Can you be more specific?

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related