Returning data from jQuery ajax request

Question

I'm trying to get a function to perform an ajax query and then return the interpreted JSON as an object. However for whatever reason, once this request is performed, the data is only accessible from within the function.

    function getCacheImage(direction) {

            jQuery.ajax({ 
                    url: json_request_string,
                    success: function(data) {
                    return data;
                    }
            });

    }

How can I get this function to return 'data' appropriately?

Thanks.

Answer 1

You need to either use a synchronous ajax request (not typical or recommended) and capture the data into a variable in the outer scope, or figure out how to manipulate the data in the callback function. The problem is that the ajax function returns before the ajax call is complete -- it's asynchronous.

Synchronous way:

 function getCacheImage(direction) {
        var capture;
        jQuery.ajax({ 
                url: json_request_string,
                aSync: false,
                success: function(data) {
                   capture = data;
                }
        });
        return capture;
 }

Typical, using callback

 function getCacheImage(direction,callback) {

        jQuery.ajax({ 
                url: json_request_string,
                success: function(data) {
                   callback( data );
                }
        });
 }

 getCacheImage('left', function(data) {
      ...do something with the data...
 }

Answer 2

You can't. The first letter of the AJAX acronym stands for asynchronous, meaning that AJAX requests are sent and control is returned immediately to the calling function. What you need to do is to work with the data in the callback function.