Make two functions run one after the other using callback

Question

In the code below i am trying to run loop_the_table function after ajax_call has finished. My code is:

function ajax_and_loop(){    

      ajax_call(function(){ loop_the_table();});
}    
   function ajax_call(callback){

     $(document).ready(function(){
         $.getJSON('php_side.php', function(data) {
           $(data).each(function(key, value) {
               value = value.toString();
               res = value.split(',');
               array_of_people_already_suscribed[row][column++] = res[0];
               array_of_people_already_suscribed[row][column++] = res[1];
               array_of_people_already_suscribed[row][column] = res[2];
               row++;
               column = 0;
           });
         });
         if (typeof callback === "function") {
         callback();
         }
       });
     }

       function loop_the_table(){
          console.log("The row is "+row);
         for(var i = 0; i < row; i++){

                   console.log("kalispera oli mera");
             console.log(array_of_people_already_suscribed[i][0]);
             console.log(array_of_people_already_suscribed[i][1]);
             console.log(array_of_people_already_suscribed[i][2]);
           }  
        }

Cosnidering ajax_and_loop gets called from index.html, what is wrong with the code? (It does not finish first ajax_call function before calling loop_the_table as it is)

Thanks a lot, it works. My only question is: why it works like this?? — mpla_mpla, Jun 28 '15 at 20:38
Because `$.getJSON` is asynchronously calling its callback. Currently you're executing `callback()` before you've received the `data`. — Bergi, Jun 28 '15 at 20:39

score 0 · Accepted Answer · answered Jun 28 '15 at 20:44

Move callback() into $.getJSON()

function ajax_and_loop(){    

      ajax_call(function(){ loop_the_table();});
}    
   function ajax_call(callback){

     $(document).ready(function(){
         // getJSON is an async function, it will not finish before your code continues
         // executing.
         $.getJSON('php_side.php', function(data) {
           $(data).each(function(key, value) {
               value = value.toString();
               res = value.split(',');
               array_of_people_already_suscribed[row][column++] = res[0];
               array_of_people_already_suscribed[row][column++] = res[1];
               array_of_people_already_suscribed[row][column] = res[2];
               row++;
               column = 0;
           });
           // place callback HERE in order to fire after the async function has finished.
         });
         // Placing callback here does not work as intended because the callback is called
         // before your async function finished executing.
         if (typeof callback === "function") {
         callback();
         }
       });
     }

       function loop_the_table(){
          console.log("The row is "+row);
         for(var i = 0; i < row; i++){

                   console.log("kalispera oli mera");
             console.log(array_of_people_already_suscribed[i][0]);
             console.log(array_of_people_already_suscribed[i][1]);
             console.log(array_of_people_already_suscribed[i][2]);
           }  
        }

score 0 · Answer 2 · edited May 23 '17 at 12:22

what is wrong with the code? (It does not finish first ajax_call function before calling loop_the_table as it is)

You're executing callback() before you've received the data - $.getJSON is asynchronously calling its callback. You will need to move the callback() call into the $.getJSON callback.

It would be much better though to return a promise from your function:

function ajax_and_loop(){
    $(document).ready(function(){
        ajax_call().then(loop_the_table);
    });
}    
function ajax_call(callback){
    return $.getJSON('php_side.php').then(function(data) {
        var array_of_people_already_suscribed = […];
        $(data).each(function(key, value) {
            var res = value.toString().split(',');
            var column = 0;
            array_of_people_already_suscribed[row][column++] = res[0];
            array_of_people_already_suscribed[row][column++] = res[1];
            array_of_people_already_suscribed[row][column] = res[2];
            row++;
        });
        return array_of_people_already_suscribed;
    });
}

function loop_the_table(array_of_people_already_suscribed) {
    var row = array_of_people_already_suscribed.length;
    console.log("The row is "+row);
    for (var i = 0; i < row; i++){
        console.log("kalispera oli mera");
        console.log(array_of_people_already_suscribed[i][0]);
        console.log(array_of_people_already_suscribed[i][1]);
        console.log(array_of_people_already_suscribed[i][2]);
    }
}

Make two functions run one after the other using callback

2 Answers2