Returning from a callback in JavaScript returns undefined?

Question

I've got this code:

function fetchSocialCount(type,fileSrc,callback){
    var req = new XMLHttpRequest();
    req.onload = function(){
        if(req.status === 200 && req.readyState === 4){
            var countResponse = JSON.parse(req.responseText);
            callback(countResponse);
        }
    }
    req.open("GET","../scripts/php/returnSocialCount.php",false);
    req.send();
}
var test = fetchSocialCount("img","ez.png",function(count){
    return count;
});

console.log(test);

But for some reason, test is undefined. My AJAX does work, and it returns an object. What's the problem?

@Pointy I've read that answer a couple of times now, and AFAIK it doesn't have a solution to my problem, as it's different. — bool3max
– bool3max, Commented Oct 7, 2015 at 16:28
The "onload" handler for your will be called by the system when the request completes, but the system doesn't pay attention to the return value. Your handler doesn't have any return statements in it anyway. — Pointy
– Pointy, Commented Oct 7, 2015 at 16:29
True, this is not an async situation (though you'll find that browsers will soon stop supporting synchronous xhr, if they haven't already). However, neither your "fetch" function nor your "onload" handler have return statements, and even if they did the runtime wouldn't pass along any return value from the "onload" handler. — Pointy
– Pointy, Commented Oct 7, 2015 at 16:31
@Pointy Yes, but that's why I have a callback, that does have a return statement, that for some reason returns undefined, and therefore you cannot mark my question as a duplicate, as it really isn't one. — bool3max
– bool3max, Commented Oct 7, 2015 at 16:34
@aCodingN00b - but the callback returns to that which called the callback, (in this case callback(countResponse);), no further up. — Trolleymusic
– Trolleymusic, Commented Oct 7, 2015 at 16:37

Matteo Tassinari · Accepted Answer · 2015-10-07 16:40:56Z

4

Your test gets the return value of fetchSocialCount itself, which is undefined since it doesn't return anything.

You can try this:

function fetchSocialCount(type, fileSrc) {
    var req = new XMLHttpRequest()
        , result = null;

    req.onload = function(){
        if(req.status === 200 && req.readyState === 4){
            result = JSON.parse(req.responseText);
        }
    }
    req.open("GET","../scripts/php/returnSocialCount.php",false);
    req.send();

    return result;
}

Since you are using a synchronous request, you should be able to return its result directly; returning from the callback as you did won't help anyway, in fact, as @Trolleymusic points out in the comments

the callback returns to that which called the callback, (in this case callback(countResponse)), no further up

edited Oct 7, 2015 at 16:40

answered Oct 7, 2015 at 16:34

Matteo Tassinari

18.6k8 gold badges65 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bool3max Over a year ago

Thanks. Works perfectly.

Pointy Over a year ago

@aCodingN00b Yes, this will work, but you may want to investigate doing your XHR requests asynchronously.

bool3max Over a year ago

@Pointy Thanks, I'll look into it.

Matteo Tassinari Over a year ago

@aCodingN00b if I may ask, why did you un-accept the answer? Is there anything I can do to improve it and/or make it more useful?

bool3max Over a year ago

@MatteoTassinari I'm sorry, I accepted it, and I accidentally clicked it again, then it bugged out (I couldn't accept it again). Sorry, I accepted it again now.

Collectives™ on Stack Overflow

Returning from a callback in JavaScript returns undefined?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related