如何迭代XML文件并使用JavaScript在HTML网页中显示数据

Question

我想遍历一个XML文件，并在HTML网页上显示字段中的数据。目前，我的代码只显示XML文件中的第一个条目。

这是我当前的HTML/JS代码，它显示了我的XML文件中的第一个条目。这是一个html文件：

<script>
displayCD(0);
function displayCD(i) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myFunction(this, i);
}
};
xmlhttp.open("GET", "data.xml", true);
xmlhttp.send();
}
function myFunction(xml, i) {
var xmlDoc = xml.responseXML; 
x = xmlDoc.getElementsByTagName("contact");
document.getElementById("showCD").innerHTML =
"Name: " +
x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue +
"<br>Email: " +
x[i].getElementsByTagName("email")[0].childNodes[0].nodeValue +
"<br>Phone: " + 
x[i].getElementsByTagName("phone")[0].childNodes[0].nodeValue;
}
</script>
<div id='showCD'></div><br>

这是我的XML代码，在一个单独的文件data.XML:中

<?xml version="1.0" encoding="UTF-8"?>
<entries>
<contact>
<name>a</name>
<email>b</email>
<phone>1234</phone>
</contact>
<contact>
<name>c</name>
<email>d</email>
<phone>5678</phone>
</contact>
</entries>

电流输出：

名称：

电子邮件：b

电话：1234

预期输出：

名称：

电子邮件：b

电话：1234

名称：c

电子邮件：d

电话：5678

Answer 1

您只需要在x(表示所有<contact>标签：

x = xmlDoc.getElementsByTagName("contact");
for (count = 0; count < x.length; count++) {
document.getElementById("showCD").innerHTML +=
"Name: " +
x[count].getElementsByTagName("name")[0].childNodes[0].nodeValue +
"<br>Email: " +
x[count].getElementsByTagName("email")[0].childNodes[0].nodeValue +
"<br>Phone: " + 
x[count].getElementsByTagName("phone")[0].childNodes[0].nodeValue;
}

附言：正如有人在评论中提到的那样，使用XSLT可能是一种总体上更整洁的方法，尽管如果你以前没有使用过它，也会有一些学习曲线。