ArrayCollection in an ArrayCollection

by DeanLogic

At work I am trying to display a bunch of information retrieved from a web services.  The data has a header table (top item) and then supporting item tables (sub items).  My current data only brings back one top item, but I have set it up to display multiple top items using a HorizontalList.  I created a custom component based on a Form, which allows me to easily display header and values.  In the future, I can probably use the form for inputs, but for now it is just displaying.  I am also using an Accordion container to display each of the header items that are wrapped in an overall item.  In each Accordion item, I dynamically create a box, to hold the form, which is dynamically created by passing it in as a new ClassFactory.  The Form acts as an item render in the HorizontalList.  Well, the problem I ran into is, that you can only pass in one DataProvider into the HorizontalList.  This was causing an issue with an item that would have an over all header information and then a DataGrid full up sub items.   After starting to fuss around with other options, it occurred to me to pass in the sub items as an ArrayCollection type.

For example, if I had a class called MyObject

package {

public class MyObject {

 public var ID:Number:

 public var Name:String:

 public var itemList:ArrayCollection

And earlier I populated an ArrayCollection called itemListArrayCollection with data, then I wanted to add this to an ArrayCollection called myMainArrayCollection, it would look something like this.

var newObject:MyObject = new MyObject();

newObject.ID = 1;

newObject.Name = 'Test';

newObject.itemList = itemListArrayCollection;


Then, in the Form I created to display the items, I would set the FormItems to show ID and Name


<mx:Label text="{data.ID}" />



<mx:Label text="{data.Name}" />


And the DataGrid within the form would get it’s DataProvider through the initial data value.  I can also point to the columns (DataFields) in the itemListArrayCollection in order to set up the DataGridColumns.

<mx:DataGrid dataprovider="{data.itemList}">


<mx:DataGridColumn DataField="listField1" />

<mx:DataGridColumn DataField="listField2" />

<mx:DataGridColumn DataField="listField2" />



I’m sure I’m not the first person to pass an ArrayCollection inside of an ArrayCollection, but it was an “ah ha!” moment for me today.  I’m not sure if it is considered best practice to do this, but it works for what I need much simpler than trying to create a component to receive multiple multiples of DataProviders.  Once I get things straightened out with the current web services, I know I will have to go back and probably have an overall ArrayCollection with 3 – 5 ArrayCollections passed into it.

About DeanLogic
Dean has been playing around with programming ever since his family got an IBM PC back in the early 80's. Things have changed since BASICA and Dean has dabbled in HTML, JavaScript, Action Script, Flex, Flash, PHP, C#, C++, J2ME and SQL. On this site Dean likes to share his adventures in coding. And since programming isn't enough of a time killer, Dean has also picked up the hobby of short film creation.

Leave a Reply