How do I make a Global Variable in JavaScript?

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.

In fixing your indentation, I noticed that there's an extra close paren and close brace after xmlParser. Is that really what your code contains? If so, you should fix your syntax errors and retest. — Jacob
– Jacob, Commented Mar 7, 2012 at 22:01
No it isnt. I had trouble copying code here and make it appear in the code block. The 4 spaces thing was weird it made some lines in the block and some not. So I basically just re-wrote a very simple version of what I was trying to do. is there a way to just do something like <code></code> where you put the code in the middle and it formats it? the 4 spaces before each line seemed tedious — Frank Visaggio
– Frank Visaggio, Commented Mar 7, 2012 at 22:13

Koen Peters · Accepted Answer · 2012-03-07 22:03:10Z

3

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

answered Mar 7, 2012 at 22:03

Koen Peters

12.9k6 gold badges40 silver badges62 bronze badges

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

2 Comments

Frank Visaggio Over a year ago

thankyou for the help! This worked great. Is there a way to to combat the asynchronous aspect of javascript? For example possibly using $(Document.OnReady) in order to call functions in the order i want them to be called from one init method but make sure they wait for the one before them to finish?

Koen Peters Over a year ago

You can make an ajax request synchronous like this: $.ajax({... your stuff..., async: false}); Try to avoid this though, because this will cause your browser to stop responding while the file is being fetched. More here: api.jquery.com/jQuery.ajax

kinakuta · Accepted Answer · 2012-03-07 22:01:50Z

2

There's only two kinds of scopes in javascript - global and function. If it's not declared inside a function, it's global. If it's not declared using var, it's also implicitly global.

answered Mar 7, 2012 at 22:01

kinakuta

9,0371 gold badge41 silver badges48 bronze badges

Comments

Aatch · Accepted Answer · 2012-03-07 22:02:42Z

1

The var keyword declares a variable as local, otherwise you can omit it and it will make it global.

The other option is to insert it into the window object like so:

window.dashboard = new Array();

This is the preferred method for insert variables into the global scope.

Also blah blah blah about not abusing global variables that you probably know.

answered Mar 7, 2012 at 22:02

Aatch

1,86610 silver badges19 bronze badges

Comments

pfries · Accepted Answer · 2012-03-07 22:07:48Z

1

if you want Java-like class semantics in javascript look at using the Revealing Module pattern.

http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript

Getting in the habit of correctly organizing your javascript code from the beginning will save you many headaches.

answered Mar 7, 2012 at 22:07

pfries

1,76812 silver badges14 bronze badges

Comments

Manish · Accepted Answer · 2012-03-07 22:07:56Z

1

You need to pass a context to $.ajax()

$.ajax({
    type: "GET",
    url: "file:///H:/ModelDisplayV1/ModelDisplayV1/files/dashboard.xml",
    dataType: "xml",
    context: this,
    success: xmlParser 
});

answered Mar 7, 2012 at 22:07

Manish

3,5521 gold badge19 silver badges17 bronze badges

Collectives™ on Stack Overflow

How do I make a Global Variable in JavaScript?

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related