CODEWITHSUNDEEP
javascriptajaxjsonglobal-variables
Michael Low
Michael Low

Reputation: 24506

How to store and access ajax data in javascript without using global variables?

I may be missing something obvious here, but how could I rewrite this code so that it doesn't need the theVariable to be a global variable ? 

<script language="javascript">  
theVariable = "";  
function setValue()  /* called on page load */ 
{    
   /* make ajax call to the server here */
   theVariable = "a string of json data waiting to be eval()'d"; 
}  
function getValue()  
{  
    alert(theVariable);  
}  
</script>     


<input type="button" onClick="javascript:getValue()" value="Get the value">

In my actual situation, the setValue function makes an ajax call to the server, receives a json string and the data from that is accessed when you mouseover various parts of the page. I end up using several global variables which works fine, but is messy and I'd like to know if there's a better and more elegant way of doing it ?

Upvotes: 3

Views: 3329

Answers (4)

bglenn
bglenn

Reputation: 235

If you don't mind having one global you can create a javascript object and store any number of pieces of data local to the javascript object.

Here's an example:

var myData = {

variable1: '',

variable2: '',

variablen: ''

};

set the data like this:

myData.variable1 = 'hello, world';

in your onclick you can call myData.variable1 to retrieve the data.

Upvotes: 0

MisterMister
MisterMister

Reputation: 396

I would do something like:

<script language="javascript">
var myApp = function () {

    /* theVariable is only available within myApp, not globally 
     * (unless you expose it) 
     */
    var theVariable = "";  

    /* called on page load */
    var setValue = function setValue(){

       /* make ajax call to the server here */
       theVariable = "a string of json data waiting to be eval()'d"; 

    };

    var getValue = function getValue() {

        alert(theVariable);

        // call useless private function
        pFunc();

    };

    var pFunc = function pFunc(){
        // this is a hypothetical private function
        // it's only here to show you how to do it
        // in case you need it

    };

    // now expose anything you need to be globally available
    // basically anything that will be called outside of myApp

    return { setValue: setValue, getValue: getValue}; 
}(); 
</script>     


<input type="button" onClick="myApp.getValue()" value="Get the value">

Then somewhere you would add an event listener or whatever for myApp.setValue() to run it on page load.

If you did:

return this;

Or just left the return statement out completely (which would imply return this)...

Then everything would be globally available as myApp.whatever or myApp[whatever].

Upvotes: 3

aaaaaaaaaaaa
aaaaaaaaaaaa

Reputation: 3700

You could make a closure like this:

<script type="text/javascript">
function setValue() /* called on page load */
{
    /* make ajax call to the server here */
    var theVariable = "a string of json data waiting to be eval()'d"; /* declared with var to make it a private */
    getValue = function() /* declared without var to make it a public function */
    {
        alert(theVariable);
    }
}
</script>

Upvotes: 1

James Westgate
James Westgate

Reputation: 11454

If you use jQuery (which you may use for the ajax portion), you can use the .data() method which allows you to assign arbitury data to document elements by key/value.

Becuase javascript is dynamically typed, you can also get an element by name/id and then add a property to that element eg

document.myData = 'xyz';

Finally, you can limit the scope of your variables using something called a closure.

Upvotes: 2

Related Questions