Twitch API Help - Iterating over multiple objects in one API call

I used a for loop to iterate through the list of twitch channels I want to display. I’ve now received three API responses within my call (which is great as previously I was doing one API call per channel). The problem I’m having now is I don’t know the best to iterate through my API responses to display whether the user is online/offline.

Below’s my code. When I console log data 2 I get three separate objects. I’m just not sure how to access them properly to display the game or display if the user is offline. Here’s my codepen: https://codepen.io/rgsoto/pen/aVRJYp?editors=1111

window.onload = function searchQuery() { 
  let baseUrl = 'https://wind-bow.gomix.me/twitch-api/channels/';
  let fullUrlEsl = baseUrl + 'ESL_SC2';
  let fullUrlOgaming = baseUrl + 'OgamingSC2';
  let fullUrlFcc = baseUrl + 'freecodecamp';
  let channels = ["ESL_SC2", "freecodecamp", "OgamingSC2"]
  
    for (var i = 0; i < channels.length; i++) {
     
     $.ajax ({
       type: 'GET',
       dataType: "jsonp",
       url: baseUrl + channels[i],
       success: function(dataI){
         //console.log(dataI);
          $.ajax({
            type: 'GET',
            dataType: "jsonp",
            url: 'https://wind-bow.gomix.me/twitch-api/streams/'+ dataI.name,}).done(function(data2){
            
            console.log(data2);
            
            if (data2.stream == null) {
               $("#ESL_SC2_stream").html('is offline');
               $("#OgamingSC2_stream").html('is offline');
               $("#freecodecamp_stream").html('is offline');
              } else {
                $("#ESL_SC2_stream").html(data2.stream.game);
                $("#OgamingSC2_stream").html(data2.stream.game);
                $("#freecodecamp_stream").html(data2.stream.game);
              }
            
            
       });
       }, 
       
       error: function (error) {
         alert("Error: User not found");
       }
       
     });
     
     
     
   }
    
};