Question

So I would like for dashboard to be able to be modified inside one function, then be displayed in another function. Kind of like a public variable in java. Is this possible? See my code below.

var dashboard = new Array();
function init() {
    getXML(); //1.  goto get XML 2.// XML Parser
    displayXML();
}

function getXML() {
    console.log("getXML REACHED");
    $.ajax({
        type: "GET",
        url: "file:///H:/ModelDisplayV1/ModelDisplayV1/files/dashboard.xml",
        dataType: "xml",
        success: xmlParser
    });
}

function xmlParser(xml) {
    dashboard[0] = 7;
    console.log(dashboard);
});
}

function displayXML() {
    console.log("display xml function reached!!!");
    console.log(dashboard);
}

When I finally try and get the console.log(dashboard) it says dashboard is undefined. I thought by declaring dashboard outside of my functions it would be global. How do I make it so I can alter the contents of dashboard in one function and retrieve them in another function?

I am more familiar with Java as opposed to Javascript.

Answer 1

The ajax call is asynchrous, so the displayXML() function is called in the init() method before dashboard is actually filled. So do this instead:

var dashboard = new Array();
function init() {
    getXML(); //1.  goto get XML 2.// XML Parser
}

function getXML() {
    console.log("getXML REACHED");
    $.ajax({
        type: "GET",
        url: "file:///H:/ModelDisplayV1/ModelDisplayV1/files/dashboard.xml",
        dataType: "xml",
        success: xmlParser
    });
}

function xmlParser(xml) {
    dashboard[0] = 7;
    console.log(dashboard);
    displayXML();
});
}

function displayXML() {
    console.log("display xml function reached!!!");
    console.log(dashboard);
}