Forgot username/password? Don't have an account?
Login with Facebook
Home » Courses » 02Hero XML » Looping XML
Subscribe for updates.
* New to us? log in with Facebook and get a free day pass

Looping XML

Now that we're somewhat familiar with the way javascript scripts are written, let's look at an example for loading and processing an XML document from inside a script.

Consider the following scenario: Swimming centers and metropolitan corporations within New York City (NYC) are submitting statistics of swimming courses taken by children below the age of 12. The NY State swimming academy is collecting these statistics (that are uploaded to the web) and feeding them to XML document processing software. We are all aware that there are four basic swimming styles: freestyle, back-stroke, butterfly and breast-stroke.

Suppose that for each style of swimming, the names of institutes and number of young trainees in that particular style of course being offered by this institute, are stored in a swimming.xml file:

<?xml version="1.0" encoding="UTF-8" ?>


<style name="Freestyle">

<tute type="Manhattan Swim Institute">335</tute>

<tute type="Brooklyn Swim Academy">400</tute>

<tute type="Long Island Swim Coaching">555</tute>


<style name="Back-Stroke">

<tute type="Manhattan Swim Institute">245</tute>

<tute type="Brooklyn Swim Academy">300</tute>

<tute type="Long Island Swim Coaching">165</tute>


<style name="Butterfly">

<tute type="Manhattan Swim Institute">200</tute>

<tute type="Brooklyn Swim Academy">350</tute>

<tute type="Long Island Swim Coaching">150</tute>


<style name="Breast-Stroke">

<tute type="Manhattan Swim Institute">150</tute>

<tute type="Brooklyn Swim Academy">300</tute>

<tute type="Long Island Swim Coaching">400</tute>



The Javascript written to process this XML document would be written as shown below:


function loadXML(path){

//javascript code for loading XML documents from a file path name


var xml = loadXML("swimming.xml");

var style = xml.documentElement.childNodes;

var tutes;

for(var i=0; i<style.length; i++){

if(style[i].nodeName != "#text"){

document.write('<h2>' + style[i] + " training institutes are" + '</h2>');

tutes = style[i].childNodes();

for(var j=0; j<tutes.length; j++){

if(tutes[i].nodeName != "#text"){

document.write('<h1>' + tutes[j].attributes.type.value + '</h1>');







This script outputs statistics regarding which institutes offer courses in each of the four swimming styles, as well as the number of trainees enrolled for each. You must verify that the output generated by this script in the browser is consistent with the intention we stated earlier. As Donald Knuth , the famous algorithmist said: "Test the code. I have merely proved it correct. It may not execute as expected!" So practice and verification are as important as, if not more so than actual coding.

Note that we have formatted the information being output by using HTML tags embedded in quotes. This example highlights the real advantage of separating content from the application: XML for storing information, and XML for formatting & rendering it through scripts.

Got A Question?

'I love being Prime'

Have a question but don't want to ask it publicly? If you are a prime member just ask right here and we will get back to you within 48 hours. Not prime yet? no worries you can ask publicly below.

Act now while we have available seating

Our on line school is private, affordable and interactive with trainer support.
Act now save your seat before someone else takes yours.
Act now