如何遍歷 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;
}

PS 正如有人在評論中提到的那樣，使用 XSLT 可能是整體執行此操作的一種更簡潔的方式，盡管如果您以前沒有使用過它，則有一些學習曲線。