Help with a For Loop not executing within a Jquery document ready function

Greetings,

I’m currently working on the TwitchTV API project.
So far i have been able to do two JSON queries and store each channels info into corresponding arrays.
My idea is to use a for loop to construct each channel Div element to display on page, using the data stored on each array.

The problem is that when using a for Loop, this is not executing. I’ve tried doing a basic function on the for loop for it to print the counter variable that i’m using within it and the console is not printing the variable within the For loop.

I Attach my code so you can try checking something within it.

$(document).ready(function(){
  var chList = ["esl_sc2","ogamingsc2","cretetion","freecodecamp","habathcx","robotcaleb","noobs2ninjas"]
  var userNames = []
  var userLogos = []
  var userStatus = []
  var userGame = []
  function users(channel){
    $.getJSON('https://api.twitch.tv/kraken/users/' + channel + '?client_id=lq86w0m7fmbky1gv60cb77biorco11', function(json){
      userNames.push(json.display_name)
      userLogos.push(json.logo)
    }) 
  }
  function streams(channel){
    $.getJSON('https://api.twitch.tv/kraken/streams/' + channel + '?client_id=lq86w0m7fmbky1gv60cb77biorco11', function(json){
      var status = jQuery.isEmptyObject(json.stream)
      if(status !== false ){
          userGame.push('')
          userStatus.push('Offline')
        } else {
          userGame.push(json.stream.game)
          userStatus.push('Online')
        }    
      }) 
  }
  chList.forEach(users)
  chList.forEach(streams)
  console.log(userNames)
  console.log(userLogos)
  console.log(userStatus)
  console.log(userGame)
for (var k = 0; k < userNames.length; k++){
  console.log("Whatever")
}
  //only for loop for div construction is missing.
});

Your for loop doesn’t iterate because userNames.length is 0.

If you make a request, it will take time to get response and your script won’t suspend rest of instructions until you get the response. So, your for loop runs before userNames is populated. You will need to search for Javascript async tutorial.

1 Like

Also, maybe you intend to do this later, but I think it’s a good idea not to skip the semicolons. Yes, your code works because of automatic semicolon insertion, and yes there’s debate about whether it’s a waste of time to include them or not–but I feel like it’s not worth skipping themfor the sake of the one ambiguous statement in a million, or simply because including them makes it easier to others to scan your code. Here’s more than you could ever want to know about it: http://www.bradoncode.com/blog/2015/08/26/javascript-semi-colon-insertion/

The for iterates from 0 to 0 so nothing happens. In my opinion it’s important to stay focused for this kind of errors and correct them as soon as possible as it lead to greater errors after.
If you find it hard you can always try some code security program…
I was once advised to use one called checkmarx. Not sure about them but you can check it up.
Good luck!
Michael.