reading data from json file .... confusion

This is great!

And you don't have necessarily to change frame.

I'll give your more examples.

Example 1: two synchronous calls:

1 - var user = "John"; // SYNCHRONOUS
2 - console.log(user); // // SYNCHRONOUS

The console will output "John" because the var assignment and the log call happens in the same tick.

Example 2: asynchronous and synchronous calls:

1- var user; // SYNCHRONOUS
2 - $.ajax({success:function(json){user = json.name;}}); // ASYNCHRONOUS
3 - console.log(user); // SYNCHRONOUS

Line 3 will be executed whether the response from line 2 is ready or not. Your program won't freeze on line 2 and wait for the JSON data to be loaded. So line 3 will execute before the response from line 2. The result from the ajax call doesn't happen in the same tick. The ajax method is called in the same tick but the response is not obtained in the same tick.

Example 3: asynchronous call, synchronous call, and click event:

1- var user; // SYNCHRONOUS
2- function clickHandler(e){console.log(user);} // SYNCHRONOUS
3 - $.ajax({success:function(json){user = json.name;}}); // ASYNCHRONOUS
4 - this.button.on("click", clickHandler}); // SYNCHRONOUS

You're probably gonna get the value of the user variable. In you case, your file loaded too fast and when you clicked you got the value loaded from the JSON. But if it was a file with hundreds of megabytes, then the value from the JSON file probably wouldn't be loaded yet.

I hope it makes sense now.

Regards,

JC

It's because your console.log it's outside the function body. You're essentially doing what you were doing at the beginning.

One thing you have to understand is that this ajax method would usually be used like a preloader code. I'll give your another example.

Let's say we have a FLA with 2 frames in the main timeline. The 1st is called preloader and the second gameMenu.

Code for the preloader frame:

/*
JSON content:
{
    "game":
    {    
        "difficulty":"normal",
        "playerName":"Sonic",
        "worlds":13,
    }
}
*/

var root = this;

root.testList = {};
root.stop();

$.ajax({
    type: 'GET',
    url: 'myData.json',
    dataType: 'json',
    success: function (json) {
        root.testList = json;
	root.gotoAndStop("gameMenu"); // when the data is fully loaded, we go to the second frame
    },

    error: function() {
        console.log("error");
    }
});

Code for the gameMenu frame:

var root = this;

console.log(root.testList.game.difficulty); // "normal"
console.log(root.testList.game.playerName); // "Sonic"
console.log(root.testList.game.worlds); // 13

Is it better to understand?

Say for example you're building a game and you have a method called start that starts the game. This method woul call the main menu, load maps, set characters, and so on.

You would only call this method inside of the success callback. In this way, you would be sure your variable would always have the data you need.

Hopefully it makes some sense to you.

Hi.

Roughly speaking, it's because the ajax method is an asynchronous request. Which means the data you need won't be immediately available and the following lines of code won't wait for the ajax response to be executed.

Imagine that instead of reading a simple JSON file you would have to read a file with hundreds of megabytes? It's easier to imagine why you can't just try to console.log the variable after the ajax method call.

So if you want to make sure you can read the variable with the proper data, you need to access it from the success callback. Like this:

var testList;

$.ajax({
    type: 'GET',
    url: 'myData.json',
    dataType: 'json',
    success: function (json) {
        testList = json;
		console.log(testList);
    },

    error: function() {
        console.log("error");
    }
});

I hope it makes some sense.

And HTML5 Canvas documents use Javascript not ActionScript.

Regards,

JC