Browse DevX
Sign up for e-mail newsletters from DevX


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