Populate Tree using data from ArrayCollection

Question

Let's say I had an ArrayCollection like this:

        public var ac:ArrayCollection= new ArrayCollection([
            {item:"dog", group:"Animals"},
            {item:"orange", group:"Fruits"}, 
            {item:"cat", group:"Animals"},
            {item:"apple", group:"Fruits"}
            ]);

How would I create a Tree component in Flex 3 that uses the groups as nodes, with the appropriate items listed under each node?

Answer 1

You can use the labelField property of the Tree to dictate which property you want to be the label for each node.

In your example, this would give you a single-level Tree:

<mx:Tree id="tree" dataProvider="{ac}" labelField="item" />

These links should help you out:

• Array as a Data Provider in a Tree
• Filter a Tree with an ArrayCollection

---

Edit: the ArrayCollection you created contains objects, each of which match groups with items. If you want to use a Tree, you need to think hierarchically, from top to bottom.

The top-most objects will be your "groups", comprised of objects representing the "items." In your ArrayCollection, each index will need to be an Object which, in turn, contains any nested children. Please note: each object must have their nested children specified in a property named "children."

For example:

{name: "Animals", children: new ArrayCollection([ {name: "Dog"}, {name: "Cat"} ])}

This `Object is thus structured hierarchically:

Object: Animals
|
|-- children
     |
     Dog
     |
     Cat

From here, the Dog and Cat objects could also have a children property, pointing to yet another ArrayCollection. Does this make sense?

Note how each object contains the same identifier. In this case, I used "name" for the label which will be displayed in the Tree. You can also use the labelFunction property to define a function which returns a String and thus can determine what the label for a given node is at run-time.

I took your ArrayCollection and bundled it into a simple application which displays it as a Tree.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        [Bindable] public var ac:ArrayCollection= new ArrayCollection([
             { name: "Animals", children: new ArrayCollection([ {name: "dog"},    {name: "cat"}])},
             { name: "Fruits",  children: new ArrayCollection([ {name: "orange"}, {name: "apple"} ])}]);

    ]]>
</mx:Script>
<mx:Tree dataProvider="{ac}" labelField="name" />