Returning Response from Ajax Calls inside For Each Loop

Question

I am doing ajax requests inside a "array.forEach" loop (main array). Each ajax response is an array corresponding to each main array item. I want to collect response of each ajax call in one final array. I am not sure how to return the response, Can any one please help.

My code is as below.

export function filterTemplateAttributes(attributes)
{
  return filter(function(attribute) { return attribute.CategoryNames[0] == "Well Readings"; },attributes );
}

export function loadWellSignals() {
  var that = this;
  //ajax call
  AfModel.getAfDatabase(function(afDatabase) {
   //ajax call
    AfModel.getTemplates(afDatabase,function(templates) {
      var wellTemplates = filter(function(template) { return 
             template.BaseTemplate =="Wells";},templates.Items);
      var totalSignals = [];
      wellTemplates.forEach(function(wellTemplate) {
        //ajax call
        AfModel.getTemplateAttributes(wellTemplate,function(attributes) {
          //this will return an array, store this result in to one array totalSignals for all the for each calls.
         var wellReadings= that.filterTemplateAttributes(attributes.Items);                            
      })
    });
  });
 });
}