0

I have an Ajax request in a for loop, but it seems that the for loop continues looping and the Ajax requests aren't shown until the end of the loop. Here is an example: 

for(var i = 1; i < Object.keys(data.masterlist).length; i++) {
    var bill = data.masterlist[i];
    var bill_info = document.createElement("P");
    var bill_info_text = document.createTextNode("Total Price: " + bill.total + " Bill ID: " + bill.bill_id);
    bill_info.appendChild(bill_info_text);
    result_div.appendChild(document.createElement("br"));
    result_div.appendChild(bill_info);
    $.ajax({
        url: "https://..." + bill.bill_id,
        dataType: "json",
        success: function(data) {                           
            result_div.appendChild(document.createTextNode(data.bill.customer));
        }
    });
}

Basically, I have a list of bills and I need to print some basic info about the bill and then make an Ajax request to get more info about the bill, which also needs to be printed.

reftoken
  • 1
  • Possible duplicate of [What is the difference between async:false and async:true in jquery ajax?](https://stackoverflow.com/questions/20209097/what-is-the-difference-between-asyncfalse-and-asynctrue-in-jquery-ajax) – Jane Nov 02 '17 at 00:46
  • 1
    Don't do it with a loop, make the next call in the success function of the previous one. – Barmar Nov 02 '17 at 01:07
  • @Jane Don't ever suggest `async: false`. – Barmar Nov 02 '17 at 01:08

0 Answers0