如何使用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節點和子節點？

回答

相關問題