XML Data Traversal

In this article, I present a XML based client-side JavaScript that reads data from an external XML file, traverses the XML data and displays the same in a tree format. I’ll use the XMLDOM ActiveX object built into Microsoft Internet Explorer for the same.

Details :

Consider the following XML file:

<?xml version=”1.0″?>
<personal>Personal Details
&nbsp&nbsp <name>Premshree Pillai</name>
&nbsp&nbsp <sex>male</sex>
&nbsp&nbsp <websites>Websites
&nbsp&nbsp <ws1>http://www.qiksearch.com</ws1>
&nbsp&nbsp <ws2>http://premshree.resource-locator.com</ws2>
</websites>
</personal>

Now, what we want the script to do is, display the above XML data in the following manner :

• personal : Personal Details
  • name : Premshree Pillai
  • sex : male
  • websites : Websites
    • ws1 : http://www.qiksearch.com
    • ws2 : http://premshree.resource-locator.com

Algorithm :

• Read the XML file
• We point a variable, tree to the first node (XML tag) of the XML data.
• If the node has child nodes :
• Print ” <ul><li> “;
• For each child node, traverse(tree.childNodes(nodeNum))
• Print ” </li></ul> “;
• If the node does not have any child :
• Print the node’s value.

Script and explanation :

Now let us take a look at the script :

var xmlDoc=new ActiveXObject(“Microsoft.XMLDOM”);

The above code creates a new instance of the Microsoft.XMLDOM ActiveX object.

function loadXML(xmlFile) {
	xmlDoc.async="false";
	xmlDoc.onreadystatechange=verify;
	xmlDoc.load(xmlFile);
}   

The loadXML() function is used to load a particular .xml file. This function makes reference to the verify() function, which is as follows :

function verify() { 
	if(xmlDoc.readyState!=4)
		return false; 
}   

The loading of a XML file goes through 5 stages :

• 0 – Object is not initialized
• 1 – Loading object is loading data
• 2 – Loaded object has loaded data
• 3 – Data from object can be worked with
• 4 – Object completely initialized

The state of loading of a XML file is accessible through the XMLDOM’s readyState property. If suppose a file (object) is not initialized then xmlDoc.readyState will return 0 and so on. Thus, in the loadXML() function we verify the status of loading of the XML document because we do not want to use a partially or uninitialized object.

Now, we will see the main function that does the XML data traversal, traverse() :

function traverse(tree) {
&nbsp if(tree.hasChildNodes()) {
&nbsp&nbsp &nbsp&nbsp document.write(‘<ul><li>’);
&nbsp&nbsp&nbsp&nbsp document.write(‘<b>’+tree.tagName+’ : </b>’);
&nbsp&nbsp&nbsp&nbsp var nodes=tree.childNodes.length;
&nbsp&nbsp&nbsp&nbsp for(var i=0; i<tree.childNodes.length; i++)
&nbsp&nbsp&nbsp&nbsp&nbsp traverse(tree.childNodes(i));
&nbsp&nbsp&nbsp&nbsp document.write(‘</li></ul>’);
&nbsp&nbsp }
&nbsp&nbsp else
&nbsp&nbsp&nbsp&nbsp document.write(tree.text);
}

The traverse() function is a recursive function that takes a node as it’s argument.

As explained earlier in the algorithm, first the function checks if the node has any childs. If the node has any childs, 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()) has no child nodes, then the function prints the value held by that node (tag). In this way, the tree structure for the XML file is generated. Now, we will take a look at the initTraverse() function :

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

The initTraverse() function takes a XML filename as it’s argument. This function first loads the XML file, sets the variable doc to the root node of the XML data and then traverses the XML data using the traverse() function with argument as the root node, i.e doc.

This function is the one that is called when you want to generate the tree structure of a XML file.

All the above code may be placed in an external .js file. The following code must be placed where the tree form of a XML file has to be generated :

initTraverse("anyXMLfile.xml"); 

Script listing :

<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>   

You can find this XML based JavaScript, “XML Data Traversal” at
http://premshree.resource-locator.com/javascripts/xml/traversal/traversal.htm.

I hope, this article has explained “XML Data Traversal”. Your comments and suggestions are welcome.

2003 Premshree Pillai.
Websites: http://www.qiksearch.com, http://premshree.resource-locator.com

Premshree Pillai studies engineering in Information Technology at
Mumbai University, Mumbai, India. He is a programming enthusiast
and maintains a Website (http://www.qiksearch.com), where he posts
his scripts. He is also a freelance writer and has written for a
range of popular Indian magazines.