[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 618
  • Last Modified:

Recursively convert XML into multidimensional array

Hello all,

I have figured out how to run through an xml file with nested nodes recursively (please see code below). My challenge now is how do i convert it into a multidimensional array? I would like the array to be the data source for a Flex tree control. Please help!

Thanks,
tone

var xml:XML =     
	<course>         
		<section>             
			<title>Introduction to Actionscript</title>             
			<section>             
				<title>Lesson 1: Variables</title>             
				<section>                 
					<title>Topic 1: Data types</title>             
				</section>             
			</section>         
		</section>     
	</course>;             


var xmlList:XMLList = xml.children();                 


parseStructure(xmlList);     


private function parseStructure(xml:XMLList):void {    
	for each (var child:XML in xml) {         
		trace(child.title);         
		if(child.section != null){                     
			parseStructure(child.section);         
		}           
	} 
}

Open in new window

0
toneDigital
Asked:
toneDigital
  • 4
  • 2
1 Solution
 
ChristoferDutzCommented:
Ok the code below is somewhat pseudocode as it doesn't handle that the first level has no "title" child. But I think it gets you the idea. The trick is to have the parseStructure return an Object for each "section" Xml tag. Each Object has a name and a children property (I think this was the default the Tree uses). The children property is initialized with all the child objects for that section.

Hope it helps.
var treeRoot:Object = parseStructure(xml);     

private function parseStructure(xml:XML):Object{    
    var obj:Object = new Object();
    obj.name = xml.title;
    if(child.section != null) {
        obj.children = new ArrayCollection();
        for each (var child:XML in xml) {
            obj.children.addItem(parseStructure(child));         
        }
    }
}

Open in new window

0
 
toneDigitalAuthor Commented:
Hi Christofer, thanks for your quick reply.

I am still a bit confused, although I know what you're saying is correct. I'm kind of new to the tree control idea. Would it be possible if you could throw together a rough example using a flex tree control with your code?

Thanks a lot
0
 
toneDigitalAuthor Commented:
Hey

i have created this mxml page, however, the code you provided is not working. What am I doing wrong? Please help.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	 initialize="init()">
	 
    <mx:Script>
    
    	<![CDATA[
    	
    		import mx.collections.ArrayCollection;
    		
    		public function init():void {
    			var item:Object;
    			var array:Array = new Array();
    			
    			var xml:XML =      
			    <course>          
			        <section>              
			            <title>Introduction to Actionscript</title>              
			            <section>              
			                <title>Lesson 1: Variables</title>              
			                <section>                  
			                    <title>Topic 1: Data types</title>              
			                </section>              
			            </section>          
			        </section>      
			    </course>;    
			    
			    
			    
			    item = parseStructure(xml);  
			    
			    array.push(item);
			    
			    var arrColl:ArrayCollection = new ArrayCollection(array);
			    
			    Tree.dataProvider = arrColl;
			             
    		}
    		
   
			private function parseStructure(xml:XML):Object{    
			    var obj:Object = new Object();
			    obj.label = xml.title;
			    if(child.section != null) {
			        obj.children = new ArrayCollection();
			        for each (var child:XML in xml) {
			            obj.children.addItem(parseStructure(child));         
			        }
			    }
			    
			    return obj;
			    
			}

    	]]>
    	
    	
    </mx:Script>

    
    <mx:HBox>
        <mx:Tree id="Tree" labelField="title" 
            width="300"/>       
    </mx:HBox>
</mx:Application>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
ChristoferDutzCommented:
If you try this version it will work (The root element will be empty though)
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				initialize="init()">
	
	<mx:Script>
    
		<![CDATA[
			
			import mx.collections.ArrayCollection;
			
			public function init():void {
				var item:Object;
				var array:Array = new Array();
				
				var xml:XML =      
					<course>          
						<section>              
							<title>Introduction to Actionscript</title>              
							<section>              
								<title>Lesson 1: Variables</title>              
								<section>                  
									<title>Topic 1: Data types</title>              
								</section>              
							</section>          
						</section>      
					</course>;    
				
				
				
				item = parseStructure(xml);  
				
				array.push(item);
				
				var arrColl:ArrayCollection = new ArrayCollection(array);
				
				Tree.dataProvider = arrColl;
				
			}
			
			
			private function parseStructure(xml:XML):Object{    
				var obj:Object = new Object();
				obj.label = xml.title;
				if(xml.section != null) {
					obj.children = new ArrayCollection();
					for each (var child:XML in xml.section) {
						obj.children.addItem(parseStructure(child));         
					}
				}
				
				return obj;
				
			}
			
		]]>
		
		
	</mx:Script>
	
	
	<mx:HBox>
		<mx:Tree id="Tree" width="300"/>       
	</mx:HBox>
</mx:Application>

Open in new window

0
 
toneDigitalAuthor Commented:
Thank you very much!
0
 
toneDigitalAuthor Commented:
Hey Chistofer,

How would I create leaf elements for items that don't require a directory? Currently all items in the tree are directories even if they are leaf elements. Thanks

tone
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now