html - How to loop through XML nodes and child nodes using JavaScript? - Stack Overflow

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!

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!

• javascript
• html
• xml

Share Improve this question Follow asked Nov 20, 2014 at 17:15 TommicchiTommicchi 3111 gold badge11 silver badge22 bronze badges 3

• are you opposed to converting your xml to json? that would make this problem much more straight forward – Birgit Martinelle Commented Nov 20, 2014 at 17:26
• @BirgitMartinelle The reason why I'm using XML opposed to JSON is organizational/structural purposes. Also, I feel using XML will be easier to share with colleagues and can be utilized by a wider variety of other languages/programs (i.e. python, Excel, etc.) – Tommicchi Commented Nov 20, 2014 at 18:33
• 1 I didn't mean to change the format that your service returns - but actually convert it, after you receive the data - there are some plugins (like fyneworks./jquery/xml-to-json) that convert xml to json for you - just for use in javascript - if you were to "feed" your data to a html-template or similar having json would make your life easier in the html/js universe ... if that's not the case ignore me ;) – Birgit Martinelle Commented Nov 21, 2014 at 2:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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.