making variable global by window method does not work

Question

After looking for other answers to make a variable global I am struggeling for some time now, it looks quite simple but it just doesn't seem to work.

My code is getting data from a CSV file and returning a variable called 'chart' containing an Array. This Array variable is to be used outside the function in a Highchart graph. (The local returned Array is correct)

I am trying to make the variable inside the function "global" by attaching it as a property of the window. Like this: turn javascript local variable into global variable

But in my code this doesn't work out:

$(document).ready(function() {
$.ajax({
   type: "GET",
    url: "data/data.csv",
    async: false,
    dataType: "text",
    success: function(data) {processData(data);}
});
});

function processData(data) {
   var table = data.split("\n").map(line => line.split(","));
   var categories = table[0].slice(2).map(e=>e*1);
   data = table.slice(1).map(a => ({"name": a[0], "id": parseInt(a[1]), "data": a.slice(2).slice(0).map(e=>e*1)}));
   var lengthdata = data.length - 1;
   var chart = data.splice(0, lengthdata);
   window.chartglobal = chart;

 console.log(chart);
 };

 console.log(chartglobal);

What am I missing here or are there better ways than the window option for mmy specific situation?

EDIT:

The code is used in leaflet where the data is connected to leaflet markers using map.on and a marker id. That way is doesn't matter that the call ajax request is a pseudo ready event which is fired after trying to get the global value. I don't know what changing the async to 'true' alters but it works either way.

The variable is used in a map.on like this:

map.on('popupopen', function(e) {

var marker = e.popup._source.feature.id; 

var search = function(name) {
    for(var key in chartglobal) {
    if(chartglobal[key].id === name) {   
    return chartglobal[key];
    }}};

    var outputhighchart = search(marker);
    var chartdef = [];
    chartdef.push(outputhighchart);});

The console.log was not logging because of the ajax call, the problem was somewhere in the map.on, which I overlooked because focusing on the global variable. Thanks for helping me out and directing in the right way.

Your issue is because you are setting it in ajax callback but call ajax request in pseudo ready event which is fired after you are trying to get the global value. Wrap all your code in document ready handler or better stop using synchronous ajax request but use relevant callback to set any logic... — A. Wolff, Sep 29 '16 at 10:29
@ A. Wolff, thanks, See my EDIT, the global variable was working correct. But because of the comment about the ready event I figured out the console.log could not work and the problem lay somewhere in the map.on with a stupid }) typo. The code works now. — Ian vh, Sep 29 '16 at 12:42
http://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron <-- and when you find out asynchronous false is a bad idea, this will explain why the value would be undefined — epascarello, Sep 29 '16 at 12:56

pavlos · Answer 1 · 2016-09-29T10:24:02.863

0

why dont you declare your variable outside your function and give a dummy val

var chartglobal = "dummy";
$(document).ready(function() {
$.ajax({
   type: "GET",
    url: "data/data.csv",
    async: false,
    dataType: "text",
    success: function(data) {processData(data);}
});
});

function processData(data) {
   var table = data.split("\n").map(line => line.split(","));
   var categories = table[0].slice(2).map(e=>e*1);
   data = table.slice(1).map(a => ({"name": a[0], "id": parseInt(a[1]), "data": a.slice(2).slice(0).map(e=>e*1)}));
   var lengthdata = data.length - 1;
   var chart = data.splice(0, lengthdata);
   chartglobal = chart;

 console.log(chart);
 };
//as @Artur Filipiak sais at this point variable is not setted yet. so should print "dummy"
 console.log(chartglobal);

edited Sep 29 '16 at 10:24

answered Sep 29 '16 at 10:22

pavlos

3,001
18
23

`as @Artur Filipiak sais at this point variable is not setted yet` OP is using `async: false,` so regarding posted code, it should be defined – A. Wolff Sep 29 '16 at 10:25
@A.Wolf Variable is defined when console.log with a dummy val. so he can find his way out – pavlos Sep 29 '16 at 10:25
I guess OP doesn't want a dummy value but the value set in ajax success callback – A. Wolff Sep 29 '16 at 10:26

making variable global by window method does not work

1 Answers1