Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Tushar Singh
PLUS
Tushar Singh
Courses Plus Student 8,692 Points
Posted by Tushar Singh
Tushar Singh
Courses Plus Student 8,692 Points

Need a little help $.forEach

I need a little help http://codepen.io/tushar_13/full/pydvON/

Now i have to loop through my array Twitchers

but when I want to append the data to the html body, it is looping inside the same list look at my codepen, you;ll see what I am talking about.

So now the problem is I have to loop through to provide a url to get the json data, so what should I do so that each channel displays on the separate line?

<div class="container">
  <button class="btn">All</button>
  <button class="btn">Online</button>
  <button class="btn">Offline</button>
<ul id="result"></ul>
</div> 

$(document).ready(function () {

var twitchers = ["freecodecamp", "brunofin", "MEDRYBW", "storbeck", "terakilobyte", "habathcx","RobotCaleb","thomasballinger","noobs2ninjas","beohoff"];
 var name;
 var status;
 var logo;

  twitchers.forEach(function(user) {
var channelUrl ="https://api.twitch.tv/kraken/channels/"+user+ '?callback=?';
var streamUrl = "https://api.twitch.tv/kraken/streams/"+ user+'?callback=?';

    $.getJSON(channelUrl, function(channel) {
      $.getJSON(streamUrl ,function(stream) {
        if(stream.stream == null) {
          status = '<i class="fa fa-ban"></i>'+ ' Offline';
        } else {
          status = '<i class="fa fa-check"></i>'+ ' Online';
        }
        name = channel.display_name;


        if (channel.logo == null) {
          channel.logo = 'http://www.trickyladygaming.com/wp-content/uploads/2015/10/Twitch-Icon-150x150.png'
        } else {
        logo = '<img src="'+channel.logo+'" id="logo">'
        }
        var html = '<div id="main-section">';
        html+= '<li><a href="https://www.twitch.tv/'+user+'" target="_blank">'+name+'</a>';
    html += logo;
        html += status;
        html += '</li></div>'
   $("#result").html(html);




      })// end streams json
    })// end channels json
  });// end each
}); // end ready

1 Answer

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

You are replacing the the entire contents of the result each time in the loop with this line:

        $("#result").html(html);

What you probably want is more like:

        $(html).appendTo("#result");

This would add to the list. You've got a bit of other work to do yet (like you probably don't want to wrap your li's in div's), but that should get you going.

Steven Parker
Steven Parker
230,274 Points
Steven Parker
Steven Parker
230,274 Points

Hey Tushar, did that help? Remember to select a "best answer" so folks will know the issue is resolved.