title: Make two functions run one after the other using callback
body: <p>In the code below i am trying to run <code>loop_the_table</code> function after <code>ajax_call</code> has finished. My code is:</p>
  
  <pre><code>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 &lt; 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]);
             }  
          }  
  </code></pre>
  
  <p>Cosnidering <code>ajax_and_loop</code> gets called from <code>index.html</code>, what is wrong with the code? (It does not finish first <code>ajax_call</code> function before calling <code>loop_the_table</code> as it is)</p>