ajax function return value undefined / [object object] for jquery v3.41+

Question

In my research, I've been unable to find examples of an ajax function that does not include depreciated jquery functionality. I need a v3.4.1 / 2020 solution.

The problem:

I can get the function to correctly output the data to the console.log() before a return. My expectation is for the console.log() to display the returned data.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

function getData (url, privateToken) {
    $.ajax({
        'crossDomain': true,
        'url': url,
        'method': 'GET',
        'headers': {
            'PRIVATE-TOKEN': privateToken
        }
    })
    .done(function (response) {

        console.log(response[0].id);  // works correctly

        // ===================================

        var test = response[0].id;    
        console.log(test);            // works correctly

        // ===================================

        return response;              // does not work, `[object object]`` when function is called

        // ===================================

        return response[0].id;        // does not work, `undefined` when function is called

        // ===================================

        var test = response[0].id;    
        return test;                  // does not work, `undefined` when function is called

        // ===================================

        var test = response;    
        return test;                  // does not work, `[object object]` when function is called

        // ===================================

        return $(response).id;        // does not work, `undefined` when function is called
    });
}

$(document).ready(function(){
    console.log(getData("https://example.com/rest/api/xyz", "<private token>"));
});

Note that I know the code will stop at the first return. I just wanted to display what was tried in an easily digestible manner.

Unfortunately it didn't work. I'll add it to the post as attempted. — Mech, Apr 06 '20 at 20:58
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Yury Tarabanko, Apr 06 '20 at 21:03
@YuryTarabanko, the answer in the provided link references depreciated functionality. This post is to use a minimum of v3.4.1. — Mech, Apr 06 '20 at 21:18
@Mech It doesn't matter. You are still trying to return from async call :) 2020 solution would be: understand the fact your code is async, ditch jquery, use native fetch and async/await. — Yury Tarabanko, Apr 06 '20 at 21:26
try to get your response by adding this ajax callback: `complete: { }` which runs when the ajax is done running. — Souleste, Apr 06 '20 at 21:51
Thanks for the effort @Souleste. `always` is the new version of the depreciated `complete` — Mech, Apr 06 '20 at 21:55
@Don'tPanic your detailed explanation and jsfiddle certainly helped my understanding as I am new to jquery but unfortunately the same result occurs between your code and mine. The takeaway from this is that it `can't return the response from a done() or always() callback`. I've since added the data to an element then called on that to pass the data I need to bypass this restriction. — Mech, Apr 28 '20 at 14:41

Don't Panic · Answer 1 · 2020-04-23T05:15:41.350

As pointed out in the comments, this is less about modern jQuery code or conventions, and more a misunderstanding about returning data from asynchronous jQuery calls. New code or old, you can't return the response from a done() or always() callback.

The jQuery docs themselves include a simple example - under The jqXHR Object, scroll down below the yellow Deprecation Notice.

Here's a working JSFiddle with a modified version of your code, using the approach described in the jQuery docs. View it with the console open, I've added a series of console.log()s to show the sequence things run in, and to demonstrate getting and using the response as expected. Note that JSFiddle includes a way to simulate async requests by making them to /echo/json, and I've updated the code to use that so we can see it working.

function getData (url, privateToken) {
    // return the jqXHR object, which is not your response!
    return $.ajax({
        'url': url,
        // ... etc
    }).done(function (response) {
        // you can log response here, display alerts, manipulate DOM, etc,
        // but not return anything useful
    });
}

$(document).ready(function(){
    var $ajax = getData("/echo/json/", "token");
    // Execution will continue here long before getData has completed
    $ajax.always(function(response, textStatus, jqXHR) {
        // Now getData has finished, and we have the response!
        console.dir(response);
    });
});

ajax function return value undefined / [object object] for jquery v3.41+

The problem:

1 Answers1