This post is no longer available

This post is no longer available


This post was deleted


I believe I see what is going wrong here:

You have two for loops that loop over the array with channel names. In the first loop you create the <p class="name <channel-name>"></p> too which you append “online” or “offline” in the second loop.

Since the ajax calls are asynchronous, it is possible that the <p class="name <channel-name>"></p> is not yet created at the moment that you try to append something to it.

EDIT: See @kevcomedia’s post for a solution.


You’re making two AJAX requests “in parallel” for each user, and you can’t predict which of the two request finishes first (the channel request or the stream request). If I understood your intent correctly, you want to request for stream data after channel data. In that case, you may want to embed the second request inside the first one, like so:

$.getJSON('channel/url', function(ata) {
  // ...

  $.getJSON('stream/url', function(data) {
    // ...

Also, consider using let instead of var in the for-loop, because you’re bound to get bugs with async code in for-loops if you used var (like in this case, the status might not show in the page)