Highlighted

reading data from json file .... confusion

New Here ,
Oct 18, 2019

Copy link to clipboard

Copied

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?

TOPICS
ActionScript

Views

73

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

reading data from json file .... confusion

New Here ,
Oct 18, 2019

Copy link to clipboard

Copied

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?

TOPICS
ActionScript

Views

74

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 18, 2019 0
Adobe Community Professional ,
Oct 18, 2019

Copy link to clipboard

Copied

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

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 18, 2019 0
New Here ,
Oct 18, 2019

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 18, 2019 0
Adobe Community Professional ,
Oct 18, 2019

Copy link to clipboard

Copied

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.

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 18, 2019 0
New Here ,
Oct 18, 2019

Copy link to clipboard

Copied

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.....

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 18, 2019 0
Adobe Community Professional ,
Oct 18, 2019

Copy link to clipboard

Copied

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?

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 18, 2019 0
New Here ,
Oct 18, 2019

Copy link to clipboard

Copied

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.

 

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 18, 2019 0
Adobe Community Professional ,
Oct 18, 2019

Copy link to clipboard

Copied

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

 

 

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 18, 2019 1