add Dynamic children to an array or arraycollection - apache-flex

Question

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.