Syntax Help

[achexi]

Hey so I've encountered an issue that pretty much comes down to my lack of knowledge in javascript.

 

I'm trying to do this with the pixi jsonloader:

 

var loader = new PIXI.JsonLoader("data/data.json");

loader.on('loaded', OnLoad);

loader.load();

console.log(this.set1);

------------------------------------------

function OnLoad(evt) {

this.set1 = evt.content.content.json.sets.set1;

console.log(this.set1);

}

 

Essentially I want to be able to address evt.content.content.json.sets.set1 from outside that function. The console log inside the function gives the expected result. The one outside of it is undefined. I'm struggling to find what I need to do to put it in scope. I've tried things like binds but I'm assuming that I'm just using it incorrectly. For all I know I could be going about this the entire wrong way and maybe its stored in a pixi cache or something. Anyone here able to offer some advice? Thanks. 

 

 

[JDW]

You need some help with scope and 'this" variables.

 

To answer your question : "this" is a reserved keyword in Javascript and is used to reference the object calling the function (to simplify, because it depends of how the function is called)

In your code, your "outside of the function" call to "this" is wrong. You have to declare a variable in the correct scope (outside of your function) and thanks to javascript closure system, you'll be able to access it from inside your function.

 

var loader = new PIXI.JsonLoader("data/data.json");

var that = {};

loader.on('loaded', OnLoad);

loader.load();

console.log(that.set1);

------------------------------------------

function OnLoad(evt) {

that.set1 = evt.content.content.json.sets.set1;

console.log(that.set1);

}

 

the "var" keyword declare a variable is the current scope. If you do not use it, you will declare your variable in the global scope (ie the 'window' object)

 

It means that teh followinf code will work too :

 

var loader = new PIXI.JsonLoader("data/data.json");

loader.on('loaded', OnLoad);

loader.load();

console.log(set1);

------------------------------------------

function OnLoad(evt) {

//first use of the variable "set1", so JS will create it in the global scope

set1 = evt.content.content.json.sets.set1;

console.log(set1);

}

 

Please not that declaring variable in the global scope is not the best choice as you may override variables from third-party plugins.

Note that PixiJS use only the variable "PIXI" as a namespace to avoid that.

 

Read more about the scope system and the 'this' keyword here :  http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/

[JDW]

I was so focused on the "this" that I didn't notice your second mistake : the call to "OnLoad" is asynchronous. So you can't be sure that "OnLoad" has been called when you try to call console.log as line 4.

 

You should stay inside your "OnLoad" function to continue your code (or call another function at the end of it). 

 

This is called a "callback" and with Javascript, you will use them a lot =)

 

http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/

[achexi]

Thanks for the above advice. I had actually done almost all of that but it was very insightful none the less as you've actually explained how js's scope works.

I realised my issue was actually me being stupid all along. I forgot that its a callback function and therefore set1 is not immediately set to the value I expected it to be. 

 

Edit: Seems you've ninja posted as I wrote this! Oh well I guess I won't be making this mistake again anytime soon