CODEWITHSUNDEEP
javascriptjqueryoopxmlhttprequest
daniel0mullins
daniel0mullins

Reputation: 1959

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

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?

Upvotes: 0

Views: 609

Answers (4)

spb
spb

Reputation: 987

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();
        }
    }
}

Upvotes: 1

gilly3
gilly3

Reputation: 91557

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

Upvotes: 0

Björn
Björn

Reputation: 2648

  1. The function doesn't return anything
  2. 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);

}

Upvotes: 1

Mikola
Mikola

Reputation: 9326

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

Upvotes: 0

Related Questions