AS3 Arrays, Array Collections & ColdFusion queries

I was scrolling through some feeds today when I cam across this post from Jeffry Houser. Joshua Cry posted a question that I thought I would take some time to answer. He wanted to know

How do I loop over a query with AS3? Is the return type of a query an ArrayCollection?

I came across many of the same questions and the first place I would suggest looking is the ColdFusion live docs. The following table lists the ColdFusion data types and the corresponding Flash or ActionScript data type:

As you can see the ColdFusion query is returned to ActionScript as an ArrayCollection. To understand how to deal with this data type we should really take a look at the details of an ArrayCollection. Anyone who has written a lick of code has delt with Arrays. What is an array exactly? An array is a grouping of items that are usually accessed by index. In AS we can create an array many ways but here are a couple of the most common.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()"> <mx:Script> <![CDATA[ private var colors:Array = ["blue","red","green","yellow","orange","purple","white"]; private var favoriteColors:Array = new Array("red","blue","green"); private function init():void { } ]]> </mx:Script> </mx:Application> If you want to access Array elements you do so by position. This example should look familiar to everyone. <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()"> <mx:Script> <![CDATA[ private var colors:Array = ["blue","red","green","yellow","orange","purple","white"]; private var favoriteColors:Array = new Array("red","blue","green"); private function init():void { for(var x:uint = 0; x < colors.length; ++x){ trace(colors[x]); } } ]]> </mx:Script> </mx:Application> The example will output the following code.

blue
red
green
yellow
orange
purple
white

So if that is an array what is an array collection. Well as the name implies the ArrayCollection class is a wrapper class that exposes an Array as a collection. To me it just makes more sense to say an array of objects or associative array. An associative array is is an abstract data type composed of a collection of keys and a collection of values, where each key is associated with one value. Here is an example of creating an ArrayCollection in AS. When you look at what an ArrayCollection is made up of you can see how a ColdFusion query could be converted to this data type.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()"> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; private var _employees:ArrayCollection; private function init():void { _employees = new ArrayCollection([ {name:"John Smith",isManager:false,age:34}, {name:"Mark Tims",isManager:true,age:45}, {name:"Jason Ruins",isManager:false,age:22}, {name:"Tim Johnson",isManager:false,age:21}, {name:"Stan bark",isManager:false,age:20}, {name:"Joe Rock",isManager:true,age:31} ]); } ]]> </mx:Script> </mx:Application></p><p>

That ArrayCollection could now be used as the data provider for many of the Flex UI components such as the data grid and combo box. For the sake of this tutorial though we will focus on looping the ArrayCollection. Sticking with my ColdFusion roots this looks very similar to looping over multi dimension arrays. <mx:Script> <![CDATA[ private function init():void { _employees = new ArrayCollection([ {name:"John Smith",isManager:false,age:34}, {name:"Mark Tims",isManager:true,age:45}, {name:"Jason Ruins",isManager:false,age:22}, {name:"Tim Johnson",isManager:false,age:21}, {name:"Stan bark",isManager:false,age:20}, {name:"Joe Rock",isManager:true,age:31} ]); for(var x:uint=0; x < _employees.length; ++x){ trace(_employees[x]); } } ]]> </mx:Script> If we print that out we will get the following output. As you will notice each iteration of the loop is an object. That object consists of key/value pairs.

[object Object]
[object Object]
[object Object]
[object Object]
[object Object]
[object Object]

John Smith|false|34
Mark Tims|true|45
Jason Ruins|false|22
Tim Johnson|false|21
Stan bark|false|20
Joe Rock|true|31

I hope this helps to clear up how ColdFusion returns queries to AS. As you can see the ArrayCollection Class is pretty easy to work with. While this article has only scratched the surface of what Arrays & ArrayCollections can do it should give you a quick start. Im still a newbie to AS so if I said anything wrong pleas feel free to correct me.