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

Question

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!

Answer 1

Attaching the root of your loop on employee rather than name would be better for nested loops (which is what this solution will use):

var employees = xmlDoc.getElementsByTagName("employee"); //outputs array of employees

for (employeeIndex = 0; employeeIndex  < employees.length; employeeIndex++) {
    var empDetails = employees[employeeIndex].children; //outputs array of details

    for (detailIndex = 0; detailIndex < empDetails.length; detailIndex++) {
        document.write(employees[employeeIndex].childNodes[detailIndex].nodeValue);
    }

    document.write("<br>");
}

I also noticed the container for each employee set of nodes is a day of the week. In the case where you want to iterate through every day of the week, you can create another nest outside of employeeIndex to loop through a dayIndex of sorts.