Twitchtv: console.log() display data

My codepen for this project: https://codepen.io/juan-coding/pen/NyKGPe?editors=0001

My code generally works, but I can tell there are some “ugly” code. One of the problems is that:
in order to display all the channels by default, I do the following:
If I place

  $(".data").html(html_all); 

in line 44, it works fine; but if place in line 30, not workable. (console.log(html_all) output as “”).

I thought, after the for loop, global variable html_all's value will be updated to a list of data for the Twitch channels, but why (console.log(html_all) output as “”, empty. ( run in line 30)?
But why button_click function is workable, in which html_all is involved?

Hopefully, someone could clarify these for me! Many thanks in advance.

You start html_all like an empty string (var html_all =""). You update this variable with getChannelData because you call in this function DisplayData. After this you call button_click. In this moment html_all isn’t empty, because you update it at start, when document is ready with:

$(document).ready(function() {
  getChannelData();
});
1 Like

I appreciate your reply. You must have read through my code. I do understand what did you say, but my question is about why console.log(html_all) (place in line 30 in codepen) output nothing. I mean, until this statement, html_all is already updated with data. But why it’s empty?

I think the problem is that Javascript doesn’t wait the for-loop's end. So it just go on console.log(html_all) before that for-loop is end.

Many thanks again to your reply. I think it makes sense.