How to loop through XML nodes and child nodes using JavaScript?



I'm currently having an issue with looping through XML nodes and displaying their child elements.


Here is what the XML looks like:



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

<monday>
<employee>
<name>Employee 1</name>
<startTime>12 PM</startTime>
<endTime>3:30 PM</endTime>
<skills>Web Development, Graphic Design</skills>
<programs>Sublime Text</programs>
</employee>
<employee>
<name>Employee 2</name>
<startTime>10 AM</startTime>
<endTime>2 PM</endTime>
<skills>Graphic Design</skills>
<programs>Illustrator, Photoshop</programs>
</employee>
<employee>
<name>Employee 3</name>
<startTime>12:30 PM</startTime>
<endTime>3:30 PM</endTime>
<skills>Social Media</skills>
<programs>Facebook, Twitter, Instagram</programs>
</employee>
</monday>


The algorithm I'm aiming for is:



  1. Within root element (monday), go into firstChild element (employee)

  2. Loop through each child element of employee (name, startTime, endTime, skills, programs)

  3. For each child element, write text to HTML document

  4. Repeat steps 2 and 3 for each employee element until iteration reaches lastChild element


So far, I am only able to iterate and write only one element of each employee. Here's the code for the name element:



// loads XML file
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else { // for IE 5/6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","assets/" + today + ".xml",false);
xhttp.send();
xmlDoc = xhttp.responseXML;
document.write("XML document loaded into an XML DOM Object." + "<br><br>"); // confirms XML file is loaded


// iterates through employees and displays their information
x = xmlDoc.getElementsByTagName("name");
for (i = 0; i < x.length; i++) { // line 1
document.write(x[i].childNodes[0].nodeValue);
document.write("<br>");
}


The output:



Employee 1
Employee 2
Employee 3


I've tried nesting another for loop within // line 1, however that results in nothing displayed in the output.


My goal for the correct output is:



Employee 1
Start Time: 12 PM
End Time: 3:30 PM
Skills: Web Development, Graphic Design
Programs: Sublime Text, Dreamweaver

Employee 2
Start Time: 11 AM
End Time: 32 PM
Skills: Graphic Design
Programs: Illustrator, Photoshop

Employee 3
Start Time: 12:30 PM
End Time: 3:30 PM
Skills: Social Media
Programs: Facebook, Twitter, Instagram


If you have any questions, I'll answer them the best I can!


Thank you ahead of hand!


No comments:

Post a Comment