Как я могу перебрать файл XML и отобразить данные на веб-странице HTML, используя JavaScript?

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 код, в отдельном файле, данные. 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

Вам просто нужно l oop сверх 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, вероятно, было бы более подходящим способом. делать это в целом, хотя есть некоторая кривая обучения, если вы не использовали это раньше.