Login | Register   
RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX

By submitting your information, you agree that devx.com may send you DevX offers via email, phone and text message, as well as email offers about other products and services that DevX believes may be of interest to you. DevX will process your information in accordance with the Quinstreet Privacy Policy.


Traverse XML Data Using JavaScript : Page 3

Learn how to build a JavaScript app that reads data from external XML files, traverses that data, and then displays it in a tree format.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

What the Script Does
First the function checks if the node has any children. If it does, the necessary indentation is done using HTML lists (<ul>,<li> tags). Next, for each child node of this node, the function traverse() is called (recursively) with the argument as that child node.

If the node argument passed to traverse() is childless, the function prints the value held by that node (tag). In this way, the tree structure for the XML file is generated.

To generate the tree structure of a XML file, use the initTraverse() function. This function takes the XML filename as it's argument. It loads the XML file, then sets the variable doc to the root node of the XML data, and finally traverses the XML data using the traverse() function with an argument as the root node, i.e doc.

function initTraverse(file) { loadXML(file); var doc=xmlDoc.documentElement; traverse(doc); }

Place the following code where the tree form of a XML file has to be generated:


All of this code can be placed in an external .js file.

Script Listing
The following is the complete listing of the client-side JavaScript app.

<script language="JavaScript"> ////////////////////////////////////////////////// // XML Data Traversal // // (c) 2003 Premshree Pillai // // http://www.qiksearch.com // // http://premshree.resource-locator.com // // Email : qiksearch@rediffmail.com // ////////////////////////////////////////////////// var xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); function loadXML(xmlFile) { xmlDoc.async="false"; xmlDoc.onreadystatechange=verify; xmlDoc.load(xmlFile); } function verify() { if(xmlDoc.readyState!=4) return false; } function traverse(tree) { if(tree.hasChildNodes()) { document.write('<ul><li>'); document.write('<b>'+tree.tagName+' : </b>'); var nodes=tree.childNodes.length; for(var i=0; i<tree.childNodes.length; i++) traverse(tree.childNodes(i)); document.write('</li></ul>'); } else document.write(tree.text); } function initTraverse(file) { loadXML(file); var doc=xmlDoc.documentElement; traverse(doc); } </script>

Moving Forward
The above script can be extended to serve a variety of purposes. For instance, you could use this JavaScript to display a sitemap by simply defining its structure in an XML file.

Premshree Pillai studies engineering in Information Technology at Mumbai University, Mumbai, India. He is a programming enthusiast and maintains a Website, where he posts his scripts. He is also a freelance writer and has written for a range of popular Indian magazines.
Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date