defined variables return undefined

Question

I have the following code but when I run the code, it returns as undefined. I have no idea why this happens!

function loadServiceXml(){
    $.get("/xml/ServiceUrls.xml", function(xml){
        return $.xml2json(xml);
    });
}

function getMajorGroups(){
    //get the base element to be created.
    var jsonXmlObject;
    jsonXmlObject = loadServiceXml();
    var element = $('.item-group-button').first();

}

The response returns the xml file without any issues, and when I break and check the values of the variables using firebug it returns as undefined.

AJAX callbacks are asynchronous. Run the code that you want to execute _inside_ the callback. This really must be the most asked question in JavaScript. — elclanrs, Apr 24 '13 at 05:56
"when I run the code" - what code do you run? What do you mean "the response returns the xml file without any issues"? What response? — Floris, Apr 24 '13 at 05:57
your loadServiceXml doesn't return anything, only the anonymous function you pass to get() returns something — Mike Trusov, Apr 24 '13 at 05:57

score 1 · Answer 1 · answered Apr 24 '13 at 05:58

1

$.get is an asynchronous operation. So what actually happens is that your loadServiceXml() method returns undefined since it does not explicitly return anything. You have to do the work you intend to inside the function you pass to $.get

function loadServiceXml(){
    $.get("/xml/ServiceUrls.xml", function(xml){
        // Process the response here
    });
}

answered Apr 24 '13 at 05:58

NilsH

13,705
4
41
59

I convert the returned xml object to a json object and I tried assigning it to a variable but that too returns undefined! – Imesh Chandrasiri Apr 24 '13 at 06:05
Returning anything from the $.get won't help. You have to process the xml inside the callback (or delegate to another function). – NilsH Apr 24 '13 at 06:07
well then I use xml2json to process the xml and parse it to a json object! but how can I get that object out to another function! or maybe store in a global variable! – Imesh Chandrasiri Apr 24 '13 at 06:11
That's how async code works. Instead of the other method depending on the value as an external variable, pass the processed json to your method inside the callback. – NilsH Apr 24 '13 at 06:40

score 1 · Answer 2 · answered Apr 24 '13 at 06:01

The return from your $.get callback doesn't return a value out of loadServiceXml. That function won't ever return anything! Additionally, you've got an asynchronous call that you're attempting to treat as a synchronous call.

Instead, try passing a callback function to loadServiceXml to be invoked with the returned value once the value comes back:

function loadServiceXml(callback){
    $.get("/xml/ServiceUrls.xml", function(xml){
        callback($.xml2json(xml));
    });
}

function getMajorGroups(){
    //get the base element to be created.
    loadServiceXml(function(jsonXmlObject) {
        var element = $('.item-group-button').first();
    }));
}

Here, you pass an anonymous function to loadServiceXml, which is then called and passed the XML object as a parameter once the object is available. So once your call completes, execution jumps back into that anonymous function in getMajorGroups.

defined variables return undefined

2 Answers2