Twitch challenge - Array is getting reinitialized

Hello,
I am working on the Twitch API challenge, and something strange is happening. I can get the list of followers (“following” array) on the first console. log. However, after I close the getJSON bracket, I try to log the same variable, and it appears empty. The “following” array is supposed to be global. Am I doing anything wrong? Please see the code below. Thank you.

//Initialize when page has loaded

$(document).ready(function(){
  // Get JSON API information
  var following=[];
  var url="https://wind-bow.glitch.me/twitch-api/streams/freecodecamp";
  $.getJSON(url,function(data){
    // Check if the channel is streaming

    if(data.stream===null) {
      $("#fccStatus").html("Channel is Offline");
    }
    else{
       $("#fccStatus").html("Channel is Streaming");
        }
  }); // close getJSON url
  var followerURL="https://wind-bow.glitch.me/twitch-api/users/freecodecamp/follows/channels";
  $.getJSON(followerURL,function(followers){
    for (var i=0;i<followers.follows.length;i++){
     
      var displayName=followers.follows[i].channel.display_name;
      following.push(displayName);
    }

      following.push("ikasperr");
    console.log(following);
  });
console.log(following);
  for (var i=0;i<following.length;i++){
console.log(i);
    var url2="https://wind-bow.glitch.me/twitch-api/streams/"+following[i];
    console.log(url2);
    $.getJSON(url2).done(function(data1){
      var logo;
      var status;
      var name;

      if(data1.stream==null) {
        logo="https://thumb9.shutterstock.com/display_pic_with_logo/1491677/238655098/stock-photo-no-entry-sign-board-on-white-background-238655098.jpg";
        status=data1.stream;
        name=data1.message;
       /* 
        $("#followerInfo").append("<div class='row'>"+"<div class='md-col-4'>"+"<img src='"+logo+"'>"+"</div>"+"<div class='md-col-4'>"+name+"</div>"+"<div class='md-col-4'>"+status+"</div>"+"</div>");
     */
      } // close data1.stream===null
        }); // close getJSON(url2)
   
  } // close for loop
   
    }); // close document ready

Can you format the code (either put 3 backticks before it and 3 after, or use the button in the text area)? It’s very difficult to read.

Anyway, it’s not being reinitialised: console.log can be executed immediately, so it logs the empty array following. Getting the JSON from a server takes time, it’s asynchronous. You need to render stuff out in the getJSON callback, so that you get the data then do stuff with it. At the minute you have an empty array, JS tries to loop through it, there’s nothing there so nothing happens; at some future point, some data maybe comes back from the AJAX call, but nothing will be done with it

Thank you @DanCouper for your prompt and kind response. I added the backticks, and it should be easier to read.

The first log of the array “following” is requested right after the for loop is completed, and before closing the getJSON function. At this time, the array is completed successfully, and the log shows the names of the followers correctly. However, when I invoke the same log right after the “});” of the getJSON block (just 2 lines below), that is when the array appears as empty. This is even before I run the next for loop to sweep through the followers’ profiles. I also added the “/?callback=?” string at the end of every URL, and I still get the same results. Any thoughts? Can you show me a similar working code? Thank you.