Loading JSON into Edge Animate with JavaScript or jQuery

Loading JSON into JavaScript and jQuery

A few people have been commenting recently on a 3 year old post on loading XML into Edge Animate so I thought it was time to update things and make a quick post on a data format that’s much more flexible, readable and simple than XML and that’s JSON (JavaScript Object Notation).

I won’t mess around. Here’s a snippet of JSON that has several top level properties (carouselButton, gradientMask, imagePath etc) and then two objects in an array each containing body, image, title, subtitle and backgroundImage properties:


{
 "carouselButton": "button.png",
 "gradientMask": "gradient.png",
 "imagePath": "images/",
 "itemHeight": 360,
 "itemWidth": 640,
 "items": [
 {
 "body": "Ham hock flank tail, chicken short loin turkey sausage porchetta kielbasa brisket spare ribs turducken ham. Ground round leberkas salami turducken turkey ham hock frankfurter chuck tri-tip beef capicola sausage kevin short loin. Ground round pork leberkas, swine strip steak kevin ham hock drumstick capicola ball tip t-bone pastrami pig meatloaf shankle. Landjaeger bresaola strip steak filet mignon, frankfurter tri-tip hamburger meatball spare ribs beef ribs tail. ",
 "image": "blueGradientBg.png",
 "subtitle": "Hello subtitle0 nice to meet you",
 "title": "This is my title0",
 "backgroundImage" : "backgroundPhone.png"
 },
 {
 "body": "Ham hock flank tail, chicken short loin turkey sausage porchetta kielbasa brisket spare ribs turducken ham. Ground round leberkas salami turducken turkey ham hock frankfurter chuck tri-tip beef capicola sausage kevin short loin. Ground round pork leberkas, swine strip steak kevin ham hock drumstick capicola ball tip t-bone pastrami pig meatloaf shankle. Landjaeger bresaola strip steak filet mignon, frankfurter tri-tip hamburger meatball spare ribs beef ribs tail. ",
 "image": "dawnGradientBg.png",
 "subtitle": "Hello subtitle1 nice to meet you",
 "title": "This is my title1",
 "backgroundImage" : "backgroundPhone.png"
 }
 ]
}

This is how we load the JSON using pure JavaScript – the browser has a built-in parser so you don’t need to load any special libraries in most cases:


function loadJSON(){
//new XMLHttpRequest
var xhr = new XMLHttpRequest();
//assign its onreadystatechange event handler to anonymous function
xhr.onreadystatechange = function(){
//4 means request finished and response is ready
if(xhr.readyState === 4 ){
//200 means 'OK' - 404 means page not found
if(xhr.status === 200){
//responseText is the built-in result string
//ref to the the parsed JSON object
jsonData = JSON.parse(xhr.responseText);
//do stuff here
//alert('My gradientMask is: ' + jsonData.gradientMask); //gradient.png
//alert('My first item title is: ' + jsonData.items[0].title); //This is my title1

)
} else {
alert('JSON loading error');
}
}
};
//open an aysnchronous stream to the file
xhr.open("GET", 'carousel_data.json', true);
//send the arguments to the XMLHttpRequest instance//(basically it loads it)
xhr.send();
};

And now loading JSON using jQuery/AJAX.


function loadJSON(){

$.ajax({
dataType: "json",
url: 'carousel_data.json',
success: function(data){

jsonData = data;

//do stuff here
//alert('My gradientMask is: ' + jsonData.gradientMask); //gradient.png
//alert('My first item title is: ' + jsonData.items[0].title); //This is my title1

},
error:function(e){

alert('JSON load error')
}
});
};

Hopefully that’s all pretty self-explanatory. If you understand simple JavaScript objects then, by default, you understand JSON.

8 thoughts on “Loading JSON into Edge Animate with JavaScript or jQuery

  1. i share Marie Goodwyn with her post… the problem is: How to add data to the JSON file.

    I will be appreciating if you can help us with this issue… thanks a lot .. thanks for all..

  2. Do you want to add new JSON objects to the actual JSON file or just load some base JSON from a file and then add objects to it in memory?

    Either way you would have to use JSON.stringify(); to convert native JavaScript objects to JSON strings. To add to a file you would probably need to do it server-side (PHP, Node etc).

  3. I haven’t the time to do that I’m afraid – check out this code:

    var obj = {name:'john', age:32};
    var str = JSON.stringify(obj);
    console.log(str);//{"name":"john","age":32}
    
  4. oh.. i so sorry… never mind i so happy for your quick respond.. this lines very useful. thank you very much…
    thanks Chris..

  5. Chris,

    I asked Svein-Tore for help on a forum page, but no help came out of it
    Now I am asking YOUR help because you have also participated in that thread and I managed to find this site of yours

    What I wrote in

    https://forums.adobe.com/thread/1447404

    is what I am pasting here:

    <<
    I am trying my very very preliminary steps in this territory (coming from basic knowledge of actionscript)

    I only know that jQuery is a javascript library. That is all I know. Have no clue yet on how to access its resources.

    So would you kindly type back to me, please, explaining exactly what I have to do in order to use jcanvas within Edge

    I have exchanged a couple of email with Caleb Evans (jCanvas creator) — his file was not downloading properly, so he fixed some bug in his site (But, alas, despite also my asking he would not touch any questions relating to Edge. It is just as if I had not asked )

    I had some difficulty finding out how to "Add JS file from disk". I originally tried to find how to do it via the Edge "File" menu option — but I now know it has to be done via Scripts under Library

    Then I performed the following steps:
    3. navigate to the file (named Jcanvas.min.js)
    4. After this, save the project and quit EA.
    '4. Open the EA HTML file.
    5. In the body part add this tag:

    But the code does not perform. What am I missing? I suspect I have to establish some “link” to jQuery — have no idea how this should be done

    Would you (kindly) PLEASE tell me exactly what I have to do

    thanks

    . . .
    blum.sergio@gmail.com
    >>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s