Issue
Disclaimer: final result works, I just don't understand the order in which a loop of nested ajax calls works.
Basically I have two ajax calls which retrieve data from an external API through curl GET requests. They both require parameters from the previous call to proceed. Each one of this "nested loop" is called in a $().each loop like so:
simple structure of calls:
$().each{
getData() --calls--> ajaxCurl1 --success--> ajaxCurl2 --success--> showData()
}
bit more detailed structure (had to omit some code)
$("#updateStats").on("click", function(){
$(".stats-card").each(getStats);
});
function getStats() {
showChart = false; //global variable used in the last ajax nested call
ajaxCall1(this.id);
}
function ajaxCall1(id) {
console.log("ajaxCall1");
$.ajax({
type: "POST",
url: "backend.php",
dataType: "json",
data: {},
success: function (result) {
let response = JSON.parse(result.response);
let dataLink = response.link ?? null;
ajaxCall2(dataLink, id);
}
});
}
function ajaxCall2(url, id) {
console.log("ajaxCall2");
$.ajax({
type: "POST",
url: "backend.php",
dataType: "json",
data: {},
success: function (result) {
let response = JSON.parse(result.response);
let data = response.data ?? null;
showData(data, id);
},
});
}
function showData(jsonData, id) {
//do stuff
if (showChart === true) {
// show chart
}
}I expected the calls to go one by one, doing the call and updating the Data in blocks like this:
//element 1
getStats();
ajaxCall1();
ajaxCall2();
showData(); //DOM UPDATE
// element 2
getStats();
ajaxCall1();
ajaxCall2();
showData(); //DOM UPDATE
....
// element n
but instead what I see in the console print is:
getStats(); // n times
ajaxCall1(); // n times
ajaxCall2(); // n times
showData(); // DOM UPDATE n times
Solution
Javascript is asynchronous by default (this video is really good). In a nutshell, when it gets to an $.ajax it will let it running in the background and go to next line it's almost running everything at once. To prevent that you need to use async/await:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
<script>
$(function () {
$("#updateStats").on("click", async function () {
const cardsArray = $(".stats-card").toArray();
for (let i = 0; i < cardsArray.length; i++) {
const card = cardsArray[i];
const result1 = await ajaxCall1(card.id);
const result2 = await ajaxCall2(result1.id, card.id);
showData(card.id, result2.id);
console.log("-");
}
});
});
async function ajaxCall1(id) {
console.log("ajaxCall1");
return await $.ajax({
type: "POST",
url: "https://jsonplaceholder.typicode.com/users",
dataType: "json",
data: {},
});
}
async function ajaxCall2(url, id) {
console.log("ajaxCall2");
return await $.ajax({
type: "POST",
url: "https://jsonplaceholder.typicode.com/todos",
dataType: "json",
data: {},
});
}
function showData(id, someData) {
console.log("Show data");
$(`#${id}`)[0].innerHTML += " UPDATED " + someData;
}
</script>
</head>
<body>
<button id="updateStats">Update stats</button>
<p id="card1" class="stats-card">Card 1</p>
<p id="card2" class="stats-card">Card 2</p>
<p id="card3" class="stats-card">Card 3</p>
<p id="card4" class="stats-card">Card 4</p>
<p id="card5" class="stats-card">Card 5</p>
<p id="card6" class="stats-card">Card 6</p>
<p id="card7" class="stats-card">Card 7</p>
<p id="card8" class="stats-card">Card 8</p>
<p id="card9" class="stats-card">Card 9</p>
<p id="card10" class="stats-card">Card 10</p>
</body>
</html>Answered By - Paulo Fernando Answer Checked By - Clifford M. (WPSolving Volunteer)