如何使用JavaScript循环遍历XML节点和子节点？

Question

我现在遇到一个问题，需要循环遍历XML节点并显示它们的子元素。

以下是XML的样式：

<?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>

我要实现的算法如下：

1. 在根元素 (monday) 中进入第一个子元素 (employee)
2. 循环遍历 employee 的每个子元素 (name, startTime, endTime, skills, programs)
3. 对于每个子元素，将文本写入 HTML 文档中
4. 重复步骤 2 和 3 直到迭代到最后一个 employee 元素

到目前为止，我只能迭代并写入每个员工的一个元素。以下是 name 元素的代码：

// 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>");
}

输出结果：

Employee 1
Employee 2
Employee 3

我尝试在// line 1中嵌套另一个for循环，但是结果在输出中没有显示任何内容。

我的目标是正确的输出：

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

如果您有任何问题，我会尽力回答！

提前感谢您！

- Tommicchi

---

你反对将你的XML转换为JSON吗？这样会使这个问题变得更加简单明了。 - Birgit Martinelle

@BirgitMartinelle 我使用XML而不是JSON的原因是出于组织/结构方面的考虑。此外，我认为使用XML将更容易与同事共享，并且可以被更广泛地使用于其他语言/程序（例如Python、Excel等）。 - Tommicchi

我并不是想改变你的服务返回格式，而是在接收数据后进行转换。有一些插件（例如http://www.fyneworks.com/jquery/xml-to-json/）可以将xml转换为json，供javascript使用。如果您将数据“提供”给类似html-template之类的东西，使用json会使您在html/js世界中更加轻松...如果不是这种情况，请忽略我的建议;) - Birgit Martinelle

Answer 1

将循环的根部附加到employee而不是name对于嵌套循环来说会更好（这就是本解决方案将使用的内容）：

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>");
}

我还注意到每个employee节点集的容器是一周中的一天。如果你想遍历每一天，你可以在employeeIndex外面创建另一个嵌套循环来遍历dayIndex。

- Xenyal