Javascript variable scope not working

Question

I am trying to parse a JSON. I am using

$getJSON

to get the file and save it's content to a variable

JSONfile

, which I am then passing to the parsing function, but outside getJSON function it contains a null and inside it, it contains proper data even thought, the variable

JSONfile

is declared globally ( I think it is ). I am Javascript beginner. Please explain what is going on here or point me to something similar ( coulnd't find myself ).

var atlasJSON = "http://127.0.0.1:8000/sprites/SPRITE.json";
var JSONfile = null;

function setup(){

    body = document.getElementById('body');
    canvas = document.createElement('canvas');

    spriteManager = new SpriteSheetClass();
    spriteManager.load(spritesheet);


    $.getJSON(atlasJSON, function(data) {
        JSONfile = data;
        console.log(JSONfile); // JSON file content is here
    });

    console.log(JSONfile); // null !!!
    debugger;

    spriteManager.parseAtlasDefinition(JSONfile);

    for(var i=0; i<spriteManager.sprites.length ; i++){
        console.log(spriteManager.sprites[i]);    
    }

    //canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    canvas.setAttribute('width', 1024);
    canvas.setAttribute('height',800);

    body.appendChild(canvas);
};

$.getJSON is asynchronous. See http://stackoverflow.com/questions/4580265/jquery-ajax-return-undefined — Benjamin Gruenbaum, May 21 '13 at 20:04
http://stackoverflow.com/q/14220321/1348195 I just found that again, it's another duplicate question of this one. — Benjamin Gruenbaum, May 21 '13 at 20:23
btw, this is not exactly a duplicate..same misconception about ajax, but not exactly the same problem as the duplicate you guys marked... — Dory Zidon, May 21 '13 at 20:28

score 2 · Answer 1 · answered May 21 '13 at 20:05

You need to use json inside your callback

$.getJSON(atlasJSON, function(data) {
        JSONfile = data;
        console.log(JSONfile); // JSON file content is here

    console.log(JSONfile); // null !!!
    debugger;

    spriteManager.parseAtlasDefinition(JSONfile);

    for(var i=0; i<spriteManager.sprites.length ; i++){
        console.log(spriteManager.sprites[i]);    
    }

    //canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    canvas.setAttribute('width', 1024);
    canvas.setAttribute('height',800);

    body.appendChild(canvas);
});

that doesn't explain what's going on.. – Dory Zidon May 21 '13 at 20:06 — Dory Zidon, May 21 '13 at 20:06

Dory Zidon · Accepted Answer · 2013-05-21T20:19:47.157

2

$.getJSON is asynchronous, this means when you call:

$.getJSON(atlasJSON, function(data) {
        JSONfile = data;
        console.log(JSONfile); // JSON file content is here
    });

then

console.log(JSONfile); // JSONfile is null...

it is the expected behaviour. The JSON will be available only when the function(data) is called.

What happens is that the function getJSON will not block the code execution. It will send off the request to the server over the network and will wait for the return data. The code will now continue to execute on the next line of code (console.log in your case) and so forth until the the data from the remote server is recieve. Once such data is received fully it will call the function.

what you can do in your function, once it returns is assign the JSON to a global variable so you can access it anywhere in your code ie.

var JSONData = null;

then once function(data) is called assign it to the variable. This way (and only once function(data) is called will) it be available for all JavaScript code.

edited May 21 '13 at 20:19

answered May 21 '13 at 20:06

Dory Zidon

10,497
2
25
39

1

Agreed - there's no scope error - this is by design. The asynchronous call goes and requests data from the server, and the stuff inside the function is only available on the response. The "null !!!" code fires BEFORE the json has a chance to return from the server meaning you haven't assigned data to that variable yet. Make sense? – 1nfiniti May 21 '13 at 20:09
sorry..not null, undefined, still same thing.. – Dory Zidon May 21 '13 at 20:11
When I printed it in chrome console using "console.log" its value is "null" and chrome does recognize undefined too, so its null, not undefined. – koleS May 21 '13 at 20:13
@Benjamin Gruenbaum, 1) I didn't do any strategic down-votes. I actually many times up vote people that answer before me. 2) I got my answers many times down-voted because of strategy of others. 3) I know that null and undefined aren't the same thing, null is defined with a value of null. 4) I didn't be-little anyone, and I'm sorry if you took offence, I only ment that in this case, undefined or null didn't make a lot of difference, it's still the same issue, wouldn't you agree? – Dory Zidon May 21 '13 at 20:17
@Benjamin Gruenbaum I'm just unsure why you did down-vote me? was my answer not ok ? – Dory Zidon May 21 '13 at 20:18
@DoryZidon I'm sorry, reading back my previous comments were written in a way too negative tone. I appreciate your contribution to this site. – Benjamin Gruenbaum May 21 '13 at 20:18
and actually in this case, it is null, as he has defined already.. – Dory Zidon May 21 '13 at 20:19
np Benjamin Gruenbaum, some people down-vote really quickly or strategically and that is very annoying indeed. If I do down-vote I explain why..as in the case of the answer bellow, that just says: "Do it like this"..that's not a complete answer, people should understand the answers, that why we come here no ? :) – Dory Zidon May 21 '13 at 20:21
@DoryZidon thanks for explanation and at least a bit of patience, what I can't say about others. – koleS May 21 '13 at 20:23
@KoleS it's fine, some people get very competitive here and it is hard indeed you have to have perfect answers, and be the first...anyhow glad I could help. good luck with it. Doing cool webstuff is a lot of fun but so is mobile :) – Dory Zidon May 21 '13 at 20:26
@koleS When you get down-voted on StackOverflow, it does _not_ mean we don't like you, or think your question is stupid. It means we don't think this question contributes a lot _to StackOverflow_. Take no offense in it. Dory, I did not down-vote you, not even initially. Mostly, it was a little frustrating seeing a high-rep user respond to the same sort of question that was asked here a million times before. FelixKling's Q&A for this is canonical. Kole should be able to understand a solution from it http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call. – Benjamin Gruenbaum May 21 '13 at 21:10

score -1 · Answer 3 · answered May 21 '13 at 20:07

-1

You need to parse the variable into the function as well

var JSONfile = null;

function setup(JSONfile){

    body = document.getElementById('body');
    canvas = document.createElement('canvas');

answered May 21 '13 at 20:07

null

29
1

Javascript variable scope not working

3 Answers3