ajax вызывает сбой при вызове в функции внутри цикла for

Question

Я пытаюсь вызвать API и получить и отобразить все заказы, а затем для каждого заказа вызывать другую конечную точку, которая возвращает сведения о работнике, который разместил заказ, и отображает эти данные вместе с деталями заказа.

Используя Ajax, я вызываю первую конечную точку, которая возвращает весь порядок. Я просматривал все возвращенные заказы и отображал детали каждого заказа. Внутри цикла я вызываю функцию, которая принимает в качестве параметра WorkerId (getWorker (WorkerId). Эта функция создается вне цикла for и содержит еще один ajax-вызов ко второй конечной точке API, который возвращает сведения о работнике.

var app = {}; // creating a empty object to hold the data

// getAllOrders method will make the Ajax request to the API
app.getAllOrders = function() {
  $.ajax({
    url: 'https://www.hatchways.io/api/assessment/work_orders',
    method: 'GET',
    dataType: 'json',
    data: {
      format: 'json'
    },
    success: function(result) {
      console.log('Ajax is working.');
      app.displayAllOrders(result);
    },
    error: function(error) {
      console.log('Something went wrong.');
      console.log(error);
    }
  });
}; //end app.getAllOrders function

app.getAllOrders();

app.displayAllOrders = function(allOrders) {
  console.log(allOrders);

  // getWorker method will make the Ajax request to the API
  app.getWorker = function(id) {
    console.log('Ajax is working.');
    $.ajax({
      url: 'https://www.hatchways.io/api/assessment/workers/' + id,
      method: 'GET',
      dataType: 'json',
      data: {
        format: 'json'
      },
      success: function(result) {
        console.log('Ajax is working.');
        app.workersInfo(result);
      },
      error: function(error) {
        console.log('Something went wrong.');
        console.log(error);
      }
    });
  }; //end app.getWorker function

  // creating a method to inject our data into the DOM
  app.workersInfo = function(worker) {
    console.log(worker);

    // Creating var for each piece of data for worker id
    var comp = $('<p>').text(worker.worker.companyName);
    var nameWorker = $('<p>').text(worker.worker.name);
    var email = $('<p>').text(worker.worker.email);
    var workerId = $('<p>').text(worker.worker.id);

    var workerInfo = $('<div>').append(nameWorker, comp, email, workerId);
    $('#allOrders').append(workerInfo);

  }; //end app.workersInfo function

  for (var i = 0; i < allOrders.orders.length; i++) {
    // creating var for each piece of data for order
    var id = $('<p>').text(allOrders.orders[i].id);
    var nameOrder = $('<h3>').text(allOrders.orders[i].name);
    var desc = $('<p>').text(allOrders.orders[i].description);
    var deadline = $('<p>').text(allOrders.orders[i].deadline);
    var workerId = $('<p>').text(allOrders.orders[i].workerId);

    // appending in div all info for the order
    var orderInfo = $('<div>').addClass('orderInfo').append(nameOrder, id, desc, deadline, workerId);
    // appending in div all info for worker
    $('#allOrders').append(orderInfo);

    // call getWorker function to display worker
    var myWorkerId = allOrders.orders[i].workerId;
    app.getWorker(myWorkerId);
  };
};

Когда вызывается getWorker(myWorkerId), вызов Ajax внутри него не вызывается. Это вызывается только после выполнения итерации цикла. Я попытался с другой функцией внутри getWorker() вместо вызова Ajax, и это работает. Пожалуйста, дайте мне знать, если вы заметите, что я делаю неправильно, и как это можно исправить.