Return value from an Ajax call

Question

I am trying to return a value from an Ajax call but am unable to find the correct way to do this. Here is what I have now:

function getCount() {
  $.ajax({
        url: "php/get.php",
        type: 'get',
        dataType: 'html',
        data: { location: "", category: "10" },
        async: false,
        success: function(data) {
            result = Math.ceil(data/20);
        } 
     });
return result;
}

As you can see, I used async false that is now depreciated. Is there another way yo return this from the function like I am now without using async: false?

Possible duplicate of [How to return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call) — Josh Beam, Oct 12 '15 at 22:50

scniro · Accepted Answer · 2015-10-13T00:46:28.773

1

You can not return result at this point because this is an asynchronous call. You can instead, return a promise and resolve it. Observe the following...

function getCount() {
    return $.ajax({
        url: 'php/get.php',
        type: 'get',
        dataType: 'html',
        data: { location: '', category: '10' },
     });
}

with sample usage...

var result;

getCount().then(function(response) { // -- asynchronous
    result = Math.ceil(response / 20);
});

Also, some shorthand syntax may be of interest here - jQuery.get()

function getCount() {
    return $.get('php/get.php', { location: '', category: '10' });
}

JSFiddle Link - demo

Alternatively, if you wish to perform your Math logic with getCount() as opposed to your then() callback, you can do so with the following pattern...

function getCount() {
    var deferred = $.Deferred();

    $.get('php/get.php', { location: '', category: '10' }, function(response) {
        deferred.resolve(Math.ceil(response / 20));
    });

    return deferred.promise();
}

getCount().then(function(response) {
    console.log(response) // Math.ceil value
});

JSFiddle Link - secondary demo

Check out the Deferred Object docs for a comprehensive overview on what's going on here

edited Oct 13 '15 at 00:46

answered Oct 12 '15 at 23:20

scniro

16,844
8
62
106

Very good information. If I wanted to store the getCount() Math.ceil value for use, how would I store that? Would I just make the variable equal to `getCount().then(function(response){});`? – user081608 Oct 13 '15 at 14:22
Unfortunately you can not do it quite that way. The typical approach is to declare an empty variable then use it once the promise is resolved, either in the `then()` callback or in an event handler function somewhere (anywhere after which it is resolved). If you were to try and use it below the callback, you'll get `undefined`. I [demo it here in the JSFiddle](http://jsfiddle.net/51f2zw5t/) for you to study, and I included some comments that hopefully will help! – scniro Oct 13 '15 at 14:30
Okay very interesting. So if I ever want to get that value, I need to put the code within the `then()` and work with it like that instead of trying to retrieve it? – user081608 Oct 13 '15 at 14:38
that is correct, and remember you can always use function calls within `then()` and pass the value, so hopefully your callback can 'stay clean' and not get too large. Check out [this SO question](http://stackoverflow.com/questions/14186290/how-can-i-store-an-ajax-calls-data-in-a-variable]) as well - addresses this same concern – scniro Oct 13 '15 at 14:45

Return value from an Ajax call

1 Answers1