returning data nested inside ajax callback

Question

im trying to get data from an ajax function to my actual app but i cant seem to pass the data outside of the function, ive read other questions and tried their recommendation but it doesnt seem to be working because its not waiting for ajax to finish loading before trying to return the data, im trying to return uid so that i can do something like

user = getUserID('test');

instead of

getUserID('user', function(id){ console.log(id); });

because i am assigning the returned data to a variable

getUserID = function(user, cb) {
    var uid;
    $.ajax({
        type: "GET",
        url: "/user_comment.php",
        data: {
            user: user
        },
        success: function(result) {
            if (result) {
                uid = /name="recipient_id" value="(.*)"/g.exec(result)[1];
                console.log('1 ' + uid);
                if(cb) {
                    try {
                        cb(null, uid);
                    } catch(e) { cb(e); }
                }
            } else {
                console.log("ERROR!! - No data returned !")
            }
        }
    });
    console.log('2 ' + uid);
    return uid;
},

all it does right now is

2 undefined
1 5511194
2 undefined
1 1462473
2 undefined
1 5469682

so it is not setting the variable

score 0 · Answer 1 · answered May 04 '17 at 11:20

0

Your code is returning the value of "uid" before any value is applied to it. You can see that your variable is set in "success" callback. This means that this callback will be called only after the asynchronous call is done. Your "getUserID" function will end AND the "return" statement will be executed BEFORE the callback. Play with your code in the debugger, you'll see what's actually going on. So what you should do is use the returned value in the "success" callback instead of the returned value from "getUserID". Like this:

getUserID('test', function(uid){
... do your stuff here => uid is defined and has the value you're looking for
});

But just don't try to do something like:

var uid = getUserID('test');
... things and stuff

answered May 04 '17 at 11:20

jackstrapp

195
10

Once you're ok with this, you should read about promises: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Promise – jackstrapp May 04 '17 at 11:28
is it impossible to set a variable to the return of an ajax call? so the information from an ajax call is unusable unless i am going to assign it to an element on the page? – LeetCodes May 05 '17 at 04:11
to modify elements in an array: array.forEach(function(item) { item.prop = "toto";}); For the question you are asking about Ajax, I really suggest you to read about how this works. And play with your code. Try to put breakpoints before the ajax call, after the ajax call and inside the callback. Because it seems like you're not understanding the concept. But i may be wrong. – jackstrapp May 05 '17 at 07:48
By reading again your comment, i repeat: what you are trying to do is not impossible but really not the way to go. The first letter of ajax means Asynchronous, You CAN go Synchronous in jquery with a simple option in the ajax call but this will completely freeze your page until the asynchronous call ends, and the duration of this freeze depends on your client's connection and your server's answer delay. You must just do what you want to do with your returned value in the callback of the ajax request instead of trying to return it in the function that's doing this ajax request. – jackstrapp May 05 '17 at 08:25

returning data nested inside ajax callback

1 Answers1