A $.getJSON inside another $.getJSON inside a Loop, that's possible?

Question

it's my first post here! I'm learning to code in freecodecamp, i love it, and i'm doing the Twitch Api Viewer for the Front End Certification.

Well, i know it's wrong, because all the channels showed in the console, are "undefined", let's see the code:

$(document).ready(function(){


var canales = ["umihyu", "smashdota", "vannDota", "ESL_SC2", "freecodecamp"];
  var stream = "https://wind-bow.gomix.me/twitch-api/streams/";      
  var channels = "https://wind-bow.gomix.me/twitch-api/channels/"; 

  for (i=0; i<canales.length; i++){
    let logo;
    let id;
    let estado;
    $.getJSON(stream + canales[i] + "/?callback=?", function(data){
      if(data.stream==null){
        //inicio funcion interna a canales
        $.getJSON(channels + canales[i] + "/?callback=?", function(data1){
          console.log(data1);
        });

      }

      else {
        console.log(data);
      }

    });     
  };
});

`

Ok, i know it's wrong, but if i'm still in the for cycle, why the content of the second $getJSON call calling [i] is undefined?

Sorry for my english, i'm learning it too.

Thanks for your response!

Pd: I know there are many resources like videos or screencast making the app, but i want to learn and understand some things for curiosity.