How Do I return a javascript variable from a function that contains a $.get() request

Question

I've tried Googling this but could not reslove it. It may seem like a really simple issue to others but I'm baffled by it. I have the below code in which I get undefined for the first alert but I still get the correct values in the 2nd alert. BUT if I comment out the first alert (just the line with alert) then the 2nd alert output becomes undefined. Can any one explain why this is and how I may output the 2nd alert correctly without the first one, any Help is greatly appreciated.

function getDetails(ID){
        var qArray = [];
        $.get('get_Question', {"Id":ID}, function(){})
        .success(function(data){
            var json = $.parseJSON(data);
            qArray.push(json.value1);
            qArray.push(json.value2);

        });
        //First Alert
        alert("-> "+qArray[0]);
        return qArray;
     }

This is the 2nd alert which calls the above method:

var myArray = getDetails(4);
alert("myArray [0]: "+myArray[0]);

Answer 1

You can't return a value, the $.get() call is asynchronous.

You need to defer any operations on qArray until the AJAX call has completed, i.e. inside the callback.

Better yet, use deferred callbacks:

function getDetails(ID) {
    return $.get('get_Question', {"Id":ID})
            .pipe(function(json) {
               return [json.value1, json.value2];
             });
}

The .pipe deferred function creates a new promise which will ultimately return the desired array, but only once the AJAX call has completed.

You would then use this like this:

getDetails(ID).done(function(qArray) {
     alert("-> " + qArray[0]);
});

Note that $.get() doesn't directly support error callbacks, but with deferred objects you can get access to them:

getDetails(ID).done(function(qArray) {
     alert("-> " + qArray[0]);
}).fail(function(jqXHR, textStatus, errorThrown)) {
     alert("The AJAX request failed:" + errorThrown);
});

Without this you'd need to build the error handling directly into the getDetails() function and then require some mechanism to tell the rest of the application logic about the error.

NB I've assumed that you don't really need to call JSON.parse() manually - if your web server returns the right Content-Type header then jQuery will do that for you automatically.

Answer 2

Ajax calls happens asynchroniusly, meaning you can't wait for the call to return and get the value. The way to do it is to employ a callback. Your example will become something similar to this:

function getDetails(ID, callback){
    $.get('get_Question', {"Id":ID}, function(){})
    .success(function(data){
        var qArray = [];
        var json = $.parseJSON(data);
        qArray.push(json.value1);
        qArray.push(json.value2);
        callback(qArray)
    });
 }

Calling it will change a bit:

getDetails(4, function (myArray) {
    alert("myArray [0]: "+myArray[0]);
});

Answer 3

The First Alert is called before the ajax call is finished, so the variable is still undefined. This is because the $.get() is done asynchronously. There is no option for $.get() to pass parameter for async calls, so you should use $.ajax() instead and pass a param async: false

Answer 4

The $.get call creates a new asynchronous request for the resource in question.

When you call the first alert it is undefined because the request hasn't been completed yet. Also since you are forced to pause on the alert the request has time to be completed in the background. Enough time for it to be available by the second alert.

The same thing happens when you comment out the first alert. This time the second alert is called before the request is completed and the value is undefined.

You need to either make your requests synchronous or consider continuing execution after receiving the response by using a callback function within the success callback function you have already defined in $.get.

Answer 5

As several others have said, ajax-request are asynchronous. You could however set the async property to false to get a synchronous request.

Example:

function getDetails(ID) {
   var result = $.ajax('get_Question', { 
      async : false, 
      data : { 'Id' :  ID }
   });

   // do something with the result

   return result;
}

I myself would have use a callback function instead beacuse async:false is bad practice and is also deprecated.

Answer 6

You'll need to rewrite $.get to use $.ajax and specify async: false

Answer 7

AJAX is asynchronous: you can't tell when the request will complete. This usually means you need to pass callback methods that will be called with the result of the request when it completes. In your case this would look something like:

function getDetails(ID, callbackFunc){
    $.get('get_Question', {"Id":ID}, function(){})
    .success(function(data){
        var qArray = [];
        var json = $.parseJSON(data);
        qArray.push(json.value1);
        qArray.push(json.value2);
        callbackFunc(qarray);
    });
 }

 getDetails(4, function(qArray) {
     alert("myArray [0]: "+qArray[0]);
 };