reading data from json file .... confusion

[Cerberus82]

Hi Folks,

i followed a forum thread regarding fetching data from a json file...

https://community.adobe.com/t5/Animate/Reading-JSON-Atlas-into-Animate-branched-from-Assigning-XML/t...

i kind of rebuild the solution but have issues to get it to work the way i want.

i'm totally new to actionscript, so i don't understand what i'm missing here...

it works when i want to read the variable testList from an event function.

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

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

// mouse over event
function mouseOverBtn(event)
{
    console.log(testList);  
}  

testList --> Object --> works fine 

But as soon as i try to read it outside an event function, the variable is empty

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

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

console.log(testList);

testList --> null

what can i do to get the data outside of an event function?

[JoãoCésar]

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

[Cerberus82]

Hi, first of all thx for the quick response.

But it unfortunately doesn't solve my problem.

how do i read in the data to a variable that i can access at any time, not only in a event function?

thx in advance

[JoãoCésar]

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.

[Cerberus82]

Sorry for bothering you, but i don't get it.... i tried what you said (as i understood it) :

var opData;

$.ajax({
    type: 'GET',
    url: 'operator_try.json',
    dataType: 'json',
    success: function (json) {
        setData(json);
    },

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

function setData(inData)
{
	opData = inData;
}

console.log(opData);

output is still undefined...

if the last line is placed inside of  a function triggered by a mouseOver event it works. i don't understand why is it neccessary to read it from within a event-function....

maybe the ajax function is not the right choice for my scenario?

i simply want the data from a json file stored in a variable that i can access at any time from any function or outside a function like a one line command.....

[JoãoCésar]

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?

[Cerberus82]

Hey JC,

thank you for your patience.

to be honest, i still don't understand why i need to jump to another frame to make the "console.log" line working

but now (being in the gameMenu frame) it works as intended.

thank you very much.

i think i have to learn how javascript/animate work, because (coming from python/C#) i'm used to completly different behaviour.

[JoãoCésar]

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