How to loop through XML nodes and child nodes using JavaScript?
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.
Tommicchi
Updated on June 05, 2022Comments
-
Tommicchi almost 2 years
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:
- Within root element (
monday
), go into firstChild element (employee
) - Loop through each child element of
employee
(name
,startTime
,endTime
,skills
,programs
) - For each child element, write text to HTML document
- 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!
- Within root element (