<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Johnvh.com - online home of John Van Horn &#187; E4X</title>
	<atom:link href="http://johnvh.com/tag/e4x/feed/" rel="self" type="application/rss+xml" />
	<link>http://johnvh.com</link>
	<description>Online home of Dallas, TX based web developer John Van Horn</description>
	<lastBuildDate>Fri, 13 Nov 2009 05:42:05 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>E4x and as3 gotcha</title>
		<link>http://johnvh.com/2009/06/26/e4x-and-as3-gotcha/</link>
		<comments>http://johnvh.com/2009/06/26/e4x-and-as3-gotcha/#comments</comments>
		<pubDate>Fri, 26 Jun 2009 19:07:42 +0000</pubDate>
		<dc:creator>johnvh</dc:creator>
				<category><![CDATA[Flash & Actionscript]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[E4X]]></category>
		<category><![CDATA[Flash]]></category>

		<guid isPermaLink="false">http://johnvh.com/?p=240</guid>
		<description><![CDATA[I love E4X in AS3. It's powerful and fairly simple. If you haven't worked with it yet, check out Roger Braunstein's excellent tutorial. But I was recently annoyed by this gotcha when doing some xml combining. Let's say you have this:
PLAIN TEXT
XML:




&#60;xml&#62;


&#160; &#160; &#60;people&#62;


&#160; &#160; &#160; &#160; &#60;person id="123"&#62;


&#160; &#160; &#160; &#160; &#160; &#160; &#60;name&#62;John&#60;/name&#62;


&#160; [...]]]></description>
			<content:encoded><![CDATA[<p>I love <a href="http://livedocs.adobe.com/flex/3/html/help.html?content=13_Working_with_XML_01.html">E4X</a> in AS3. It's powerful and fairly simple. If you haven't worked with it yet, check out <a href="http://dispatchevent.org/roger/as3-e4x-rundown/">Roger Braunstein's excellent tutorial.</a> But I was recently annoyed by this gotcha when doing some xml combining. Let's say you have this:</p>
<div class="igBar"><span id="lxml-4"><a href="#" onclick="javascript:showPlainTxt('xml-4'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">XML:</span>
<div id="xml-4">
<div class="xml">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;xml<span style="font-weight: bold; color: black;">&gt;</span></span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;people<span style="font-weight: bold; color: black;">&gt;</span></span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;person</span> <span style="color: #000066;">id</span>=<span style="color: #ff0000;">"123"</span><span style="font-weight: bold; color: black;">&gt;</span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;name<span style="font-weight: bold; color: black;">&gt;</span></span></span>John<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/name<span style="font-weight: bold; color: black;">&gt;</span></span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/person<span style="font-weight: bold; color: black;">&gt;</span></span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;person<span style="font-weight: bold; color: black;">&gt;</span></span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;name<span style="font-weight: bold; color: black;">&gt;</span></span></span>David<span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/name<span style="font-weight: bold; color: black;">&gt;</span></span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; &nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/person<span style="font-weight: bold; color: black;">&gt;</span></span></span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp; &nbsp; <span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/people<span style="font-weight: bold; color: black;">&gt;</span></span></span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #009900;"><span style="font-weight: bold; color: black;">&lt;/xml<span style="font-weight: bold; color: black;">&gt;</span></span></span> </div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>Let's parse with E4X:</p>
<div class="igBar"><span id="lactionscript-5"><a href="#" onclick="javascript:showPlainTxt('actionscript-5'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-5">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// #1</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">xml</span>.<span style="color: #006600;">people</span>.<span style="color: #006600;">person</span>.<span style="color: #0066CC;">length</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// 2</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// #2</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// no animals, but e4x still returns an XMLList</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">xml</span>.<span style="color: #006600;">people</span>.<span style="color: #006600;">animal</span>.<span style="color: #0066CC;">length</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// 0</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// #3</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// no animals, so no further children, but still returns XMList</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">xml</span>.<span style="color: #006600;">people</span>.<span style="color: #006600;">animal</span>.<span style="color: #006600;">fur</span>.<span style="color: #0066CC;">color</span>.<span style="color: #0066CC;">length</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// 0</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// #4</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// gotcha</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">xml</span>.<span style="color: #006600;">people</span>.<span style="color: #006600;">person</span>.<span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">"123"</span> == @id <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// thows: ReferenceError: Error #1065: Variable @id is not defined. </span></div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>The first 3 examples work great. Even though there are no <code>&lt;animal&gt;</code> nodes, E4X still returns an XMLList. Even looking for more siblings under nodes that don't exist works great - it always returns an empty (but valid) XMLList. Always returning an XMLList makes it easy to work with because you can always for-each over the result. </p>
<p>What I don't understand is the 4th example. It fails because not every <code>&lt;person&gt;</code> node has an id attribute. But so what? If you look at the 2nd and 3rd examples, not every <code>&lt;people&gt;</code> node has an <code>&lt;animal&gt;</code> node. So why don't we get the same result - an empty XMLList?</p>
<p>Turns out that there is an easy solution/work-around, that Roger mentions in his tutorial:</p>
<div class="igBar"><span id="lactionscript-6"><a href="#" onclick="javascript:showPlainTxt('actionscript-6'); return false;">PLAIN TEXT</a></span></div>
<div class="syntax_hilite"><span class="langName">Actionscript:</span>
<div id="actionscript-6">
<div class="actionscript">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// will error if every person node does not have an id attribute</span></div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">xml</span>.<span style="color: #006600;">people</span>.<span style="color: #006600;">person</span>.<span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">"123"</span> == @id <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;">&nbsp;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// use this</span></div>
</li>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;color:#3A6A8B;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #0066CC;">trace</span><span style="color: #66cc66;">&#40;</span> <span style="color: #0066CC;">xml</span>.<span style="color: #006600;">people</span>.<span style="color: #006600;">person</span>.<span style="color: #66cc66;">&#40;</span> attribute<span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">"id"</span> <span style="color: #66cc66;">&#41;</span> == <span style="color: #ff0000;">"123"</span> <span style="color: #66cc66;">&#41;</span>.<span style="color: #0066CC;">length</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;</div>
</li>
<li style="font-weight: bold;color:#26536A;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #808080; font-style: italic;">// 1 </span></div>
</li>
</ol>
</div>
</div>
</div>
<p></p>
<p>A bit <em>wtf</em>, but at least it works like the other examples.</p>
]]></content:encoded>
			<wfw:commentRss>http://johnvh.com/2009/06/26/e4x-and-as3-gotcha/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
