How to introduce callback function to return AJAX data in jQuery?

Question

I'm trying to return some data from a function crimeTrendTable, which uses the jQuery .ajax to pull some data from the web, to a function which called it postcodeConvert.

I think I need to implement a callback function to make sure it only returns the information once the data is returned, but I'm a bit confused about how to do it?

$(document).ready(function()
{
function crimeTrendTable(latitude, longitude){
    //Find all available dates
    availability_url = "http://policeapi2.rkh.co.uk/api/crimes-street-dates";
    listings = $.ajax({
                  
        dataType: 'jsonp',
        url: availability_url, 
        success: function(data){
            latest = data[0]['date'];
            three_months_date = data[3]['date'];
            six_months_date = data[6]['date'];
            year_ago_date = data[12]['date'];
            list_dates = [latest, three_months_date, six_months_date, year_ago_date];
        },
        error: function(jqXHR, textStatus, errorThrown){ 
            $('#results').html('<h2>Something went wrong!</h2><p><b>' + textStatus  + '</b> ' + errorThrown  + '</p>');
        }
    })
   
    
} 
function postcodeConvert(entry){

    //Convert to upper case
    entry = entry.toUpperCase().replace(" ", "");
    base_url = "http://mapit.mysociety.org/postcode/";
    query_url = base_url+entry;
    console.log(query_url);
    $.getJSON(query_url, function(data){
        $('div#results').html("<p>Latitude: "+data['wgs84_lat']+"</p><p>Longitude: "+data['wgs84_lon'])+"</p>";
        data_results = "";
        data_results = crimeTrendTable(data['wgs84_lat'], data['wgs84_lon']);
        console.log("postcode"+data_results);
        return data_results;
    })
    
}    

$('#postcode').focus(); //ensure the place field is the first box highlighted
      //Disable the submit button from sending anything as we don't need to...
$('#form_submit').submit(function(){
  return false;
});//end submit function
$(':submit').click(function(){
    //function convert text box postcode into lat long
 if ($('#postcode').val() !=''){
    entry = $('#postcode').val();
    postcodeConvert(entry);           
 }  
}); 

});

Answer 1

If you return the ajax XHR object, you can use the built in done() callback to make sure the data is available :

$(document).ready(function() {
function crimeTrendTable(latitude, longitude){
    return $.ajax({
        dataType: 'jsonp',
        url: availability_url, 
        error: function(jqXHR, textStatus, errorThrown){ 
            //error function does'nt work with JSONP, remove this
        }
    }):
}

function postcodeConvert(entry){
    /* more stuff here */
    return $.getJSON(query_url, function(data){
        $('div#results').html("<p>Latitude: "+data['wgs84_lat']+"</p><p>Longitude: "+data['wgs84_lon'])+"</p>";
        return crimeTrendTable(data['wgs84_lat'], data['wgs84_lon']);
    }):
}    

$('input[type="submit"]').click(function(e){
    e.preventDefault();
    if ($('#postcode').val() !=''){
       entry = $('#postcode').val();
       postcodeConvert(entry).done(function(data) {
          //data is now avaiable here
          latest = data[0]['date'];
          three_months_date = data[3]['date'];
          six_months_date = data[6]['date'];
       });
    }  
}); 

Note that you have some errors in your code, like all your variables being global ?

Answer 2

You are right that you need a callback to get the data results from the postcodeConvert function.

The return you have right now

return data_results;

won't really do anything. If you modify the postcodeConvert function definition so that it accepts a callback argument

function postcodeConvert(entry, callback) {

and change your return statement into a callback call

callback(data_results)

then you can call your postcodeConvert function like this:

postcodeConvert(entry, function(data_results) {
// use data_results
});

Answer 3

This method/function will be ran when data is returned from the server (with http status 200)

function(data){
        latest = data[0]['date'];
        three_months_date = data[3]['date'];
        six_months_date = data[6]['date'];
        year_ago_date = data[12]['date'];
        list_dates = [latest, three_months_date, six_months_date, year_ago_date];
    }

If you add a call to a method inside that function it will run when you have your data. Else you can just write a methods name in the "success : " if it is easier for you to have a sepparate function like:

function callback(data) {
  // do something with data
}

$.ajax({

    dataType: 'jsonp',
    url: availability_url, 
    success: callback,
    error: function(jqXHR, textStatus, errorThrown){ 
        $('#results').html('<h2>Something went wrong!</h2><p><b>' + textStatus  + '</b> ' + errorThrown  + '</p>');
    }
});