Parsing XML is one of the major pain points in development. Without exact syntax you’re left scratching your head. After visiting the same collection of links over and over, I’ve decided to consolidate the more useful syntax into a single post. All examples can be used with both JavaScript and ActionScript as they are both based off of ECMAScript.

Problem:
E4x is great but it requires exact knowledge of the syntax. It’s easy to forget common functions if not used every day.

Solution:
This cheat sheet is a collection of examples from common XML structures. It’s meant to kick your brain back into gear after a few months without working in e4x. For a more comprehensive guide to XML and e4x please visit the links at the bottom of this post.

What is XML and e4x? I’ll let Wikipedia handle that one.

Step 1: Define XML

Here is a quick example on defining XML inline:

var data:XML = <data>
	<image>pirates.jpg</image>
</data>;

var data = <data>
	<image>pirates.jpg</image>
</data>;

The only difference is that the ActionScript variable is typed. The JS version will work in AS but typed variables are so much easier to work with. Code completion is my best friend.

OK, from here on out I’m just going to show the XML, trace statements and expected output. Everything is cast to a string for easy output.

Step 2: Access a node value

Using the XML above…

trace(String(data.image));

Output:
pirates.jpg

alert(String(data.image));

Strikingly similar, however, break points and trace statements are so much more fun than alerts.

Step 3: Access an attribute

<data>
	<image name="Pirate Image">pirates.jpg</image>
</data>

trace(String(data.image.@name));

Output:
Pirate Image

I assume by this point you can figure out the JS syntax. Writing JS is like eating squash. It’s good for you but why do it when there is free cake?

Step 4: Access a node value given an attribute key

<data>
	<image name="Pirate Image" id="p1">pirates.jpg</image>
	<image name="Pirate Image 2" id="p2">pirates2.jpg</image>
</data>

trace(String(data.image.(@id == "p2")));

Output:
pirates2.jpg

JavaScript developers are ActionScript developers, they just don’t know it yet.

Step 5: Access an attribute given an attribute key

Using the XML from step 4…

trace(String(data.image.(@id == "p2").@name));

Output:
Pirate Image 2

ActionScript and JavaScript are like two people that hate each other only to later find out that they are actually siblings with everything in common. They proceed to live happily ever after.

Step 6: Parse through nodes

<data>
	<image name="Pirate Image" id="p1">pirates.jpg</image>
	<image name="Flower Image" id="f1">flower.jpg</image>
	<image name="Car Image" id="c1">car.jpg</image>
</data>

for each(var img:XML in data.image)
{
	trace(String(img.@name));	
}

Output:
Pirate Image
Flower Image
Car Image

Just remove the typed variable, replace trace with print and your JS will be good to go. At this point you might want to start populating value objects with attributes, paths and id’s.

Additional resources:
http://www.republicofcode.com/tutorials/flash/as3xml/
http://www.senocular.com/flash/tutorials/as3withflashcs3/?page=4

JSON parsing cheat sheet coming soon!