javascript - 如何使用 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>

当前输出:

名称:a

电子邮件:b

电话:1234

预期输出:

名称:a

电子邮件: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 可能是完成此任务的一种更简洁的方法，尽管如果您以前没有使用过它，会有一些学习曲线。