Unable to return an object's value from a JavaScript function

Question

I have a function which attempts to capture a return value from a calling function in the following manner:

var select = xhrRetrieve(projID);

Here is an example of the xhrRetrieve function:

function xhrRetrieve(projID) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                var obj = $.parseJSON(xhr.responseText);

                return obj.select.toString();
            }
        }
    }

    var url = "ajax.cgi";
    var data = "action=retrieve-opp&proj-id=" + projID;

    xhr.open("POST",url);
    xhr.setRequestHeader("Content-Type","application/x-www-urlencoded");
    xhr.send(data);

}

I am using jQuery in conjunction with straight JavaScript. Whenever I attempt to get the value of obj.select using:

var select = xhrRetrieve(projID);

Select always comes back undefined.

What am I doing wrong?

Björn · Accepted Answer · 2011-06-25 01:30:41Z

The function doesn't return anything
The moment you call your function, the (not currently present) return value is being assigned to select. At the same moment, your ajax request is being fired, which takes time to complete; the callback function will not be called until the ajax request has completed (and succeeded).

This should work:

function doStuffWithTheAjaxResponse(select) {
   // do stuff
}

function xhrRetrieve(projID) {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            if(xhr.status == 200) {
                var obj = $.parseJSON(xhr.responseText);

                doStuffWithTheAjaxResponse(obj.select.toString());
            }
        }
    }

    var url = "ajax.cgi";
    var data = "action=retrieve-opp&proj-id=" + projID;

    xhr.open("POST",url);
    xhr.setRequestHeader("Content-Type","application/x-www-urlencoded");
    xhr.send(data);

}

spb · Accepted Answer · 2011-06-25 01:37:33Z

1

Since the request is asynchronous the function will return before your code in onreadestatechange fires. You can switch to synchronous and get the value before the function returns:

function xhrRetrieve(projID) {
    var returnVal;
    var xhr = new XMLHttpRequest();

    var url = "ajax.cgi";
    var data = "action=retrieve-opp&proj-id=" + projID;

    //3rd param is false to switch to synchronous
    xhr.open("POST",url, false);
    xhr.setRequestHeader("Content-Type","application/x-www-urlencoded");
    xhr.send(data);
    if(xhr.readyState == 4) {
        if(xhr.status == 200) {
            var obj = $.parseJSON(xhr.responseText);
            return obj.select.toString();
        }
    }
}

answered Jun 25, 2011 at 1:37

spb

9872 gold badges8 silver badges15 bronze badges

Comments

Mikola · Accepted Answer · 2011-06-25 01:25:17Z

0

The function xhrRetrieve doesn't have a return value. What do you expect to happen?

answered Jun 25, 2011 at 1:25

Mikola

9,3542 gold badges36 silver badges42 bronze badges

2 Comments

daniel0mullins Over a year ago

does not the return obj.select.toString(); inside of xhr.onreadystatechange achieve this?

Mikola Over a year ago

No, that will only happen when that XHR event gets fired. If you want a blocking call, you will need to either set async=false when you call xhr.send; or better yet use an asynchronous solution like the snippet Bjorn posted.

Community · Accepted Answer · 2017-05-23 12:19:02Z

0

You have two functions there. The inner function returns a value, but not the outer one. The inner function is an event handler so the return value doesn't go anywhere. Your XMLHttpRequest is asynchronous, so you won't get a return value right away. See this post for a more detailed explanation: parameter "true" in xmlHttpRequest .open() method

edited May 23, 2017 at 12:19

CommunityBot

11 silver badge

answered Jun 25, 2011 at 1:36

gilly3

92.6k26 gold badges148 silver badges179 bronze badges

Collectives™ on Stack Overflow

Unable to return an object's value from a JavaScript function

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related