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