Question

我试图调用API并获取并显示所有订单，然后针对每个订单调用另一个端点，该端点返回有关下订单的工人的详细信息，并显示这些详细信息和订单详细信息。

使用Ajax，我调用返回所有顺序的第一个端点。我遍历了所有退回的订单，并显示有关每个订单的详细信息。在循环内部，我调用了一个以WorkerId（getWorker（WorkerId）为参数的函数。该函数在for循环外部创建，并包含对第二个API端点的另一个ajax调用，该API返回有关worker的详细信息。

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调用，并且此方法有效。请让我知道您是否可以发现我在做什么错以及如何解决。

在for循环内的函数中调用ajax调用失败

0 个答案: