如何使用 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++) {&nbsp; document.getElementById("showCD").innerHTML +=&nbsp; &nbsp; "Name: " +&nbsp; &nbsp; x[count].getElementsByTagName("name")[0].childNodes[0].nodeValue +&nbsp; &nbsp; "<br>Email: " +&nbsp; &nbsp; x[count].getElementsByTagName("email")[0].childNodes[0].nodeValue +&nbsp; &nbsp; "<br>Phone: " +&nbsp;&nbsp; &nbsp; x[count].getElementsByTagName("phone")[0].childNodes[0].nodeValue;}PS 正如有人在评论中提到的，使用 XSLT 可能是完成此任务的一种更简洁的方法，尽管如果您以前没有使用过它，会有一些学习曲线。