jQuery getJSON in for loop

Question

I am trying to make two json calls from twitch for each channel in an array of twitch channels. For some reason the array items are undefined in the second json call.

var streamers = ["freecodecamp", "medrybw", "brunofin", "storbeck",       "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff"],
 streamerList = $('ul.list-group');

for (var i = 0; i < streamers.length; i++) {

 $.getJSON("https://api.twitch.tv/kraken/streams/" + streamers[i], function(streamData) {

  $.getJSON("https://api.twitch.tv/kraken/channels/" + streamers[i] //undefined, function(channelData) {

   var listItem = $('<li/>').addClass('list-group-item').appendTo(streamerList);
   var nameLink = $('<a/>').html(JSON.stringify(channelData.display_name)).appendTo(listItem);

  });
 });
}