How Do I Access The Return Value Of This Ajax Request?

I have this code var stats = { GetMetaData : function() { var url = 'http://www.bungie.net/api/reach/reachapijson.svc/game/metadata/'+storage.get('apikey'); $.

Solution 1:

Because jquery ajax requests are asynchronous by default. You can make request synchronous by using async: false option or (better) use callback function. Also, as CharlesLeaf notes, using synchronous request will lock up the browser until response is received.

About the whole concept of asynchronous operations. I would link some explanation from jquery site, but it seems to be down now.

Solution 2:

var stats =  {
    GetMetaData : function() {
        var url = 'http://www.bungie.net/api/reach/reachapijson.svc/game/metadata/'+storage.get('apikey');
        var result;
        $.ajax({
            url: url,
            async: false,
            success: function(data) {
                result = data;
            }
        });

        return result;
    }
}

Solution 3:

You will not be able to handle the return value that you are returning from your success callback, for the following reasons:

• First of all, your return data statement is returning from the success callback, and not from the outer GetMetaData function.

• But in addition, by the time your success callback is invoked, the GetMetaData function will have already returned. Keep in mind that $.ajax() is asynchronous (non-blocking) by default. Asynchronous is the A in AJAX.

You should handle the response data within the callback directly, or call a helper function to handle the response. Since functions are first class citizens in JavaScript, you could pass this "helper function" as an argument to your GetMetaData function, as @Guffa suggested in the other answer.

Solution 4:

The AJAX call is asynchronous, which means that the call returns immediately, and the callback function is called when the data arrives. As your GetMetaData method has already finished, the value that the callback returns is ignored.

You could make the call synchonous, but you should avoid that if possible, as it freezes the browser until the response arrives. The usual way is to use a callback function.

Add a callback to the method:

var stats =  {
  GetMetaData : function(callback) {
    var url = 'http://www.bungie.net/api/reach/reachapijson.svc/game/metadata/'+storage.get('apikey');
    $.ajax({
        url: url,
        success: callback
    });
  }
}

Call it using:

stats.GetMetaData(function(data){
  // do something with the data
});

Solution 5:

Since the request is going to be asynchronous, the way to access data is via a callback function, which in this case is the function assigned to success property. You could make the request synchronous, but that's a blocking call which I wouldn't recommend as the browser is locked until the request returns.