Function inside 2nd AJAX call is happening before the 1st AJAX call

Question

I have two ajax calls which run one after the other. In the second ajax call, once the response is recieved, the data is passed to another function for processing and then returned back. The data from the response of the first ajax call and the returned value from the function call in the second ajax call are then combined and passed to update a set of charts.

Here is the ajax calls code:

                    $.ajax({
                    type: "POST",
                    url: {$js_url} + '/wp-content/plugins/WickCustomLD/categoryDataGrabAjax.php',
                        data: {"userID" : chosenSudent},
                        success: function(data) {
                            var response = data;
                            var response = JSON.parse(response);
                            alert(response);
                            ;
                        },
                        error: function (request, status, error) {
                            alert(request.responseText);
                        }
                        });                     
                        
                    $.ajax({
                    type: "POST",
                    url: {$js_url} + '/wp-content/plugins/WickCustomLD/quizHistory.php',
                        data: {"userID" : chosenSudent},
                        success: function(data) {
                            var response2 = data;
                            var response2 = JSON.parse(response2);
                            
                            returnedData = randomQuizExtractFunc(response2);

                            updateConfigAsNewObject(chart1, chart2, chart3, chart4, chart5, randomQuizChart, response[0],
                                           response[1], response[2], response[3], response[4], response[5], response[6],
                                                      returnedData[0], returnedData[1]);    
                    
                            var result_table = makeTableHTML(response2);
                            quizHistoryDiv.innerHTML = result_table;
                            $(document).ready(function() {
                                $('#quizHistoryTable').DataTable( {
                                    
                                    dom: 'Bfrtip',
                                    buttons: [
                                        'copy', 'csv', 'excel', 'pdf', 'print'
                                    ]
                                    
                                });
                            });
                            ;
                        },
                        error: function (request, status, error) {
                            alert(request.responseText);
                        }
                    }); 

Here is the function which is called in the second ajax call and returned back:

function randomQuizExtractFunc(quizHistData) {
                    var randomQuizList = [];
                    for(var i=0; i<quizHistData.length; i++) { 
                        if (quizHistData[i][0].startsWith("Random") == true) {
                            randomQuizList.push(quizHistData[i]);
                        }
                    }
                    
                    randomQuizList.sort(function(a,b){
                          return new Date(a[2]) - new Date(b[2])
                        })
                    
                    var randomQuizDataScores = [];
                    var randomQuizDataDates = [];
                    
                    for(var i=0; i<randomQuizList.length; i++) { 
                        randomQuizDataScores.push(randomQuizList[i][1]);
                        randomQuizDataDates.push(randomQuizList[i][2]);
                    }
                    
                    return [randomQuizDataScores, randomQuizDataDates];
                    
                    
                }

The issue I have is that despite the first ajax call having data returned (evidenced from the initial ajax call's alert script), when the program is run, I get the error:

Uncaught ReferenceError: response is not defined

It would appear that the function in the second ajax call is executed before the data is returned from the first ajax call, but I don't understand why as code should surely be executed in the order in which it is written?

Any help on how I can get response data into the chart update function call (along with the returned data from the function in the second ajax call) would be greatly received.

Answer 1

If you need to wait for the ajax to finish you can use Promise, but check if your project needs to support older browser: Promise support

new Promise((resolve, reject) => {
    $.ajax({
        type: "POST",
        url: {$js_url} + '/wp-content/plugins/WickCustomLD/categoryDataGrabAjax.php',
        data: {"userID": chosenSudent},
        success: function (data) {
            var response = data;
            var response = JSON.parse(response);
            alert(response);
            resolve(response);//resolve the promise
        },
        error: function (request, status, error) {
            alert(request.responseText);
            reject(request.responseText);//reject the promise
        }
    });
}).then((response) => {
    //if the promise is resolved enter here
    $.ajax({
        type: "POST",
        url: {$js_url} + '/wp-content/plugins/WickCustomLD/quizHistory.php',
        data: {"userID": chosenSudent},
        success: function (data) {
            var response2 = data;
            var response2 = JSON.parse(response2);
            returnedData = randomQuizExtractFunc(response2);
            updateConfigAsNewObject(chart1, chart2, chart3, chart4, chart5, randomQuizChart, response[0],
                    response[1], response[2], response[3], response[4], response[5], response[6],
                    returnedData[0], returnedData[1]);
            var result_table = makeTableHTML(response2);
            quizHistoryDiv.innerHTML = result_table;
            $(document).ready(function () {
                $('#quizHistoryTable').DataTable({

                    dom: 'Bfrtip',
                    buttons: [
                        'copy', 'csv', 'excel', 'pdf', 'print'
                    ]

                });
            });
            ;
        },
        error: function (request, status, error) {
            alert(request.responseText);
        }
    });
}, (error) => {
    //if the promise is rejected enter here
    console.error(error); // Stacktrace
});

Off topics and hints founded in your code:

1. why don't you combine both ajaxes
2. use dataType: "json" instead var response = data;var response = JSON.parse(response);,
3. what is this part with $(document).ready(function () {