Need to set global variable from ajax call

Question

I'm receiving a value from an ajax call and I need to make those variables available for other functions. I having some difficulty getting the global variable set. Based on another SO question, I thought passing the variables to another function on SUCCESS would put the values in the global scope, but this isn't working.

success: function (json) {
    var xCoord = json.features[0].geometry.x;
    var yCoord = json.features[0].geometry.y;
    var xyCoord = json.features[0].geometry;
    setXY(xCoord,yCoord,xyCoord);
},

function setXY(x,y,geometry){
    var xCoord = x;
    var yCoord = y; 
    var xyCoord = geometry
}

How can I accopmlish this seemingly easy task????

Answer 1

Declare your variables in the parent scope and then assign the values to them in the success function.

var xCoord, yCoord, xyCoord;

...

success: function (json) {
    xCoord = json.features[0].geometry.x;
    yCoord = json.features[0].geometry.y;
    xyCoord = json.features[0].geometry;
},

Now all functions in the parent scope have access to those variables.

Answer 2

you can use window object

window.userdata = {};

function setXY(x,y,geometry){
    window.userdata.xCoord = x;
    window.userdata.yCoord = y; 
    window.userdata.xyCoord = geometry;
}

if you like, can use a global object:

var userdata = {};    
function setXY(x,y,geometry){
    userdata.xCoord = x;
    userdata.yCoord = y; 
    userdata.xyCoord = geometry;
}

Answer 3

when using the keyword var, you declare a variable in the local scope. If you're inside a function, that variable will be accessible only from inside it.

You can either declare the variable in global scope, or access the global scope via window:

var global1 = true;

function setXY(x,y,geometry){
    global1; //return true
    window.global1; //true also
    window.global2 = 3;
    global3 = 5; // If you use no var keyword, it also points to the global scope.
} 

Answer 4

You can use the window object, to set global variables:

function setXY(x,y,geometry){
    window.xCoord = x;
    window.yCoord = y; 
    window.xyCoord = geometry
}

But this is not a terribly good practice. You should be tying to namespace your application to avoid cluttering the global namespace, and potential conflicts with other libraries you may want to include in the future.

There are a couple of ways around this.

The easiest way is to define a single object in the global namespace that can keep all of your other variables within a discrete object:

var myData;
function setXY(x,y,geometry){
        myData.xCoord = x;
        myData.yCoord = y; 
        myData.xyCoord = geometry
 }

Another way is with closures . In this way you can encapsulate blocks of code away from the global space.

(function() {
   var myVar;
   function mySuccess(data) {
     myVar = data;
     $.ajax({ url: 'test.com', success: mySuccess});
   }
})()

In this way, all code from within the closure can access myVar , but you have not needlessly added to the global namespace.

Another way would be to use an object.

var Ajaxer = function(){

};
Axazer.prototype.setData = function(data) {
   this.data = data;
}
Azaxer.prototype.doAjax = function() {
   var self = this;
   $.ajax({ url: 'test.com', success:function(data){self.setData(data);});
}


var myAjxer = new Ajaxer();
myAjaxer.doAjax();

This way is arguable the most useful, as it allows you maintain discrete classes, that you can pass around and interact with.