如何使用JavaScript循环浏览XML节点和子节点？

我目前在循环浏览XML节点和显示其子元素时遇到了问题。如何使用JavaScript循环浏览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>

我的目标的算法是：

在根元素（monday），进入则firstChild元素（employee）
循环遍历每个子元素的employee（name,startTime,endTime,skills,programs）
对于每个子元素，文本写入HTML文档
每个employee元素重复步骤2和3，直到迭代达到lastChild元素

到目前为止，我只能够重复写每个员工只有一个元素。下面是为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循环，但是这导致没有显示在输出。

我对正确的输出目标是：

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

如果您有任何问题，我会回答他们尽我所能！

谢谢你提前！

来源

2014-11-20 Tommicchi

你是否反对将你的xml转换为json？这会使这个问题更直接 – 2014-11-20 17:26:44

@BirgitMartinelle我使用XML反对JSON的原因是组织/结构性的目的。另外，我觉得使用XML会更容易与同事分享，并可以被更广泛的其他语言/程序（例如Python，Excel等）使用 – Tommicchi 2014-11-20 18:33:29

我并不是故意改变服务返回的格式 - 但实际上转换它，收到数据后 - 有一些插件（如http://www.fyneworks.com/jquery/xml-to-json/）将xml转换为json - 仅供在JavaScript中使用 - 如果你要将你的数据“喂”到一个html模板或类似的东西，那么json会让你的生活在html/js世界更容易......如果不是这样的话，不要理睬我;） – 2014-11-21 02:33:40

附加你的循环根上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。

来源

2014-11-20 18:44:05 Xenyal

如何使用JavaScript循环浏览XML节点和子节点？

回答

相关问题