How to avoid AJAX async = false

Question

I'm trying to only run this piece of code when the all the loop of data is done and when the ajax for each data is completed.

flowData["operators"] = operators;
  console.log(flowData);
  // Apply the plugin on a standard, empty div...
  $('#testCaseConnections').flowchart({
    data: flowData
  });

I had async=false but since this is bad practices I tried another approach but it isn't working.

How do I run that code only after everything is run?

My code

This is basically getting some names and get the inputs from the db of those names and create a javascript object to be run on flowchart

$.when($.each(data, function(index, value) {
  testCaseName = value[1];
  var testCaseType = value[2];
  $('#testCaseList').append('<li class="list-group-item justify-content-between">' + testCaseName + ' (' + testCaseType + ')' +
    '<div class="icons-right">' +
    '<a class="action-icon" id="delete-' + testCaseName + '" name="' + testCaseName + '"><span class="fa fa-trash"></span></a>' +
    '</div></button></li>');

  //#################### TEST CASE CONNECTIONS #########################
  var operator = {};
  $.ajax({
    type: 'post',
    url: '/flow/getInputs?testCaseName=' + testCaseName,
    success: function(inputs) {
      //Create test case container
      var properties = {};
      properties["title"] = testCaseName;
      var operatorInputs = {};
      for (var i = 0; i < inputs.length; i++) {
        operatorInputs["input_" + i] = {
          label: inputs[i].name
        };
      }
      properties["inputs"] = operatorInputs;
      properties["outputs"] = {};
      //set a different position (otherwise they get stacked)
      posy += 200;
      operator = {
        top: posx,
        left: posy
      };
      operator["properties"] = properties;
      operators["operator" + index] = operator;

    }
  });
})).then(function() {
  flowData["operators"] = operators;
  console.log(flowData);

  // Apply the plugin on a standard, empty div...
  $('#testCaseConnections').flowchart({
    data: flowData
  });
});