Flex Tree with infinite parents and children

Question

I am working on a tree component and I am having a bit of the issue with populating the data-provider for this tree.

The data that I get back from my database is a simple array of value objects. Each value object has 2 properties. ObjectID and ParentID. For parents the ParentID is null and for children the ParentID is the ObjectID of the parent.

Any help with this is greatly appreciated.

Essentially the tree should look something like this:

Parent1
 Child1
  Child1
 Child2
  Child1
  Child2
Parent2
 Child1
 Child2
 Child3
   Child1

This is the current code that I am testing with:

public function setDataProvider(data:Array):void
{
var tree:Array = new Array();    
for(var i:Number = 0; i < data.length; i++)
{

 // do the top level array
 if(!data[i].parentID)
 {
  tree.push(data[i], getChildren(data[i].objectID, data));
 }
}
function getChildren(objectID:Number, data:Array):Array
{
 var childArr:Array = new Array();
 for(var k:Number = 0; k < data.length; k++)
 {
  if(data[k].parentID == objectID)
  {
   childArr.push(data[k]);
   //getChildren(data[k].objectID, data);
  }
 }
 return childArr;
}

trace(ObjectUtil.toString(tree));
}

Here is a cross section of my data:

   ObjectID     ParentID
   1       NULL   
   10       NULL
   8       NULL
   6       NULL
   4       6
   3       6
   9       6
   2       6
   11       7
   7       8
   5       8

Answer 1

So, what is the actual problem you're having?

It appears to me that you're not actually creating any children in your dataProvider. Each object should have children. This is your code, slightly modified, but completely runnable version of your code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            [Bindable]
            public var data : Array = ([
                {objectID:1, parentID:null},
                {objectID:10, parentID:null},
                {objectID:8, parentID:null},
                {objectID:6, parentID:null},
                {objectID:5, parentID:6},
                {objectID:4, parentID:6},
                {objectID:9, parentID:6},
                {objectID:2, parentID:6},
                {objectID:11, parentID:7},
                {objectID:7, parentID:8},
                {objectID:5, parentID:8},
            ]);

            [Bindable]

        public var dataProvider : Array;



        protected function application1_creationCompleteHandler(event:FlexEvent):void
        {
            // TODO Auto-generated method stub
            setDataProvider(data);
        }

        public function setDataProvider(data:Array):void
        {
            var tree:Array = new Array();    
            for(var i:Number = 0; i < data.length; i++)
            {

                // do the top level array
                if(!data[i].parentID)
                {
                    data[i].children = getChildren(data[i].objectID, data);
                    tree.push(data[i]);
                }
            }

            function getChildren(objectID:Number, data:Array):Array
            {
                var childArr:Array = new Array();
                for(var k:Number = 0; k < data.length; k++)
                {
                    if(data[k].parentID == objectID)
                    {
                        childArr.push(data[k]);
                        //getChildren(data[k].objectID, data);
                    }
                }
                return childArr;
            }

//              trace(ObjectUtil.toString(tree));
                dataProvider = tree;
            }


        ]]>
    </fx:Script>

    <mx:Tree id="treeObject" dataProvider="{dataProvider}" />

</s:Application>