Twitch Streamers App display problem!

I don’t know why I can’t get my code to display the logo, display name and status. Everything is shown fine in the console but can’t seem to show up on the page. Could you please help me point out the problem? I appreciate it! Thank you!

Here’s my pen:

I think I see the problem. When you build the html from javascript you reference a jquery object $("#user_info") but you have a class of that name, not an id, so you need to use $(".user_info")

I noticed a few other things, but I think you’ll figure it all out yourself once you can see everything working in the preview. But if not just reply and I’ll try to take another quick look at it.

Good Luck

1 Like

Thank you JashuHB! I fixed it and now it is able to display. However, something more is wrong because it doesn’t display all users and it also repeat some of the users’ names. What else did you notice?

The following code:

$(".user_info").prepend("<div class= 'row'>" + "<div class='col-md-4'>" + "<img src= '" + logoURL + "'>" + "</div>"
 + "<div class= 'col-md-4'>" + display_name + "</div>" + "<div class = 'col-md-4'>" + status + "</div></div>");   

is outside of the if else statement.

When you make the following getJSON call

$.getJSON(channelURL + user_arr[i] + '?callback=?',function(data){

the assignments of

            display_name = data.display_name;
            logoURL = data.logo;
            status = "Offline";

are happening slower than the for loop iteration because getJSON is an asynchronous function.

To remedy this, take the prepend function code (at the top of this comment) and put it inside a separate function and then call it within the 2nd getJSON callback function and also at the end of your else statement code.


This is so helpful rmdawson71! Thank you a million times!!!

Good catch! My immediate thought was to move the variable declarations inside the function and use “let”, which solved the repeats. But then I was focused on the problem of offline users showing undefined. I only got a few minutes into that search before seeing you’d solved the problem.