add Dynamic children to an array or arraycollection

Question

Hi, I'm a bit new to flex and cannot get my head around this problem. can someone help. thanks in advance.

I have a string list path.
path 1 - "one/two/three"
path 2 - "one/two/four"
path 3 - "five/six"

i need an advanced datagrid to show a tree structure like so
one/
...two/
........three/
............four
five/
.......six
but i want to achieve this dynamicall with arrays, objects, or arraycollection (as applicable)
I need to loop through each string path using string methods which isnt a problem but how do i create "DYNAMIC" (depth) children? please help as i'm about to pull my hair out.

Answer 1

You can try something like:

var paths:Array = ['one/two/three','one/two/four','five/six'];
var pathsCollection:ArrayCollection = new ArrayCollection();

for(var i:int = 0 ; i < paths.length ; i++){
    var folderArr:Array = paths[i].split('/');
    var folderNum:int = folderArr.length;
    var folderLabel:String = '';
    for(var j:int = 0 ; j < folderNum; j++){
        trace(folderLabel+folderArr[j]);
        pathsCollection.addItem({label:folderLabel+folderArr[j],level:j,path:folderArr});
        folderLabel += '...';
    }
}

and as sharvey says, do have a look at recursion.

Answer 2

Recursion is the way to go when you are operating on objects which contain an unknown number of elements. Try this sample application:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="{init();}"
    layout="vertical"
    verticalAlign="middle">
<mx:Script>
    <![CDATA[
        import mx.utils.ObjectUtil;
        import mx.collections.HierarchicalData;
        private var paths:Array = ['one/two/three','one/two/four','five/six'];
        private static const DELIMITER:String = "/";

        private function init():void {
            var test:Array = buildHierarchy(paths);
            dg_test.dataProvider = new HierarchicalData(test);
            trace(ObjectUtil.toString(test));
        }

        private function buildHierarchy(arr:Array):Array {
            var ret:Array = new Array();
            var o:Object = new Object();
            /* Loop over the paths array */
            for (var i:int = 0; i < arr.length; i++) {
                /* Split the string block according to the delimiter */
                var parts:Array = String(arr[i]).split(DELIMITER);
                if (parts.length) {
                    /* Make a new object with a label equal to the first string element */
                    o = new Object();
                    o.label = parts[0];

                    /* Remove the first item in the string list */
                    parts.splice(0, 1);

                    /* Important - If the string has remaining members, call this 
                        function again with the remaining members. Assign this to 
                        the 'children' property of the newly created object */
                    if (parts.length > 0) 
                        o.children = buildHierarchy([parts.join(DELIMITER)]);

                    /* Add the object to the new array */
                    ret.push(o);
                }                   
            }
            return ret;
        }
    ]]>
</mx:Script>
<mx:AdvancedDataGrid id="dg_test" height="200" width="400">
    <mx:columns>
        <mx:AdvancedDataGridColumn id="col_label" dataField="label"/>
    </mx:columns>
</mx:AdvancedDataGrid>

This function will call itself once for every element contained in the 'string/string/string' block. The key to getting this structure displayed in the ADG is to set the adg.dataProvider = new HierarchicalData(myArray);

Hope this works! I can't get the code formatted 100% but you should get the idea. Don't forget to add the closing application tag.