如何使用 JavaScript 迭代 XML 文件并在 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;

}

PS 正如有人在评论中提到的，使用 XSLT 可能是完成此任务的一种更简洁的方法，尽管如果您以前没有使用过它，会有一些学习曲线。