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?

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...
 }