Отображение Xml-документа

#javascript #html #xml

#javascript #HTML #xml

Вопрос:

Я нашел один код на w3school, который должен отображать XML-файл в табличном формате. Я пытаюсь заставить это работать с моим файлом, но я не могу его получить.

Мой код:

 <!DOCTYPE html>
 <html>
 <style>
  table,th,td {
 border : 1px solid black;
  border-collapse: collapse;
  }
   th,td {
  padding: 5px;
    }
  </style>
  <body>

   <button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
   <br><br>
    <table id="demo"></table>


   <script>
   function loadXMLDoc() {
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 amp;amp; this.status == 200) {
  myFunction(this);
   }
   };
   xmlhttp.open("GET", "https://newfmplayer.online/AirPlayHistory.xml",       true);
  xmlhttp.send();
 }
 function myFunction(xml) {
 var i;
   var xmlDoc = xml.responseXML;
  var table="<tr><th>name</th><th>Song title</th></tr>";
  var x = xmlDoc.getElementsByTagName("Song");
  for (i = 0; i <x.length; i  ) { 
   table  = "<tr><td>"  
    x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue  
   "</td><td>"  
   x[i].getElementsByTagName("Song title")[0].childNodes[0].nodeValue  
   "</td></tr>";
    }
   document.getElementById("demo").innerHTML = table;
 }
 </script>

</body>
</html>

Ссылка на мой файл:https://newfmplayer.online/AirPlayHistory.xml
Исходный код из w3schools :https://www.w3schools.com/xml/tryit.asp?filename=tryxml_display_table

Ответ №1:

Ну, на самом деле в вашем xml-файле атрибуты содержат значения. В примере w3school сам узел содержит значения. Итак, в основном вам нужно получить доступ к атрибутам узла, а не к самому узлу (элементу).

Перейдите по этой ссылке на w3school, чтобы получить доступ к атрибутам:

Пример:

 <!DOCTYPE html>
<html>
<head>
<title>Testing XMLHttpRequest</title>
<style type="text/css">
  table,th,td {border : 1px solid black; border-collapse: collapse; }
   th,td { padding: 5px; }
</style>
<script type="text/javascript">
    function loadXMLDoc() {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 amp;amp; this.status == 200) {
                myFunction(this);
            }
        };
        xmlhttp.open("GET", "AirPlayHistory.xml", true);
        xmlhttp.send();
    }
    function myFunction(xml) {
        var i;
        var xmlDoc = xml.responseXML;
        var table = "<tr><th>name</th><th>Song title</th></tr>";
        var songTitles = xmlDoc.getElementsByTagName("Song");
        var artistNames = xmlDoc.getElementsByTagName("Artist");
        for (i = 0; i < songTitles.length; i  ) {
            table  = "<tr><td>"   artistNames[i].attributes.getNamedItem("name").nodeValue   "</td><td>"   
                    songTitles[i].attributes.getNamedItem("title").nodeValue   "</td></tr>";
        }
        document.getElementById("demo").innerHTML = table;
    }
</script>
</head>
<body>
    <button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
    <br/><br/>
    <table id="demo"></table>
</body>
</html>

1. Привет, я попытался заменить document.getElementById («demo»).innerHTML = table; на x = xmlDoc.getElementsByTagName(«Song») [0].attributes; txt = x.getNamedItem («title»).nodeValue; , это не сработало,, я что-то не так, или следует сделать что-то еще?

2. Извините, но по-прежнему ничего не происходит, я также пытался изменить другой идентификатор, но ничего

3. Пожалуйста, проверьте консоль на наличие какой-либо ошибки? Нажмите Ctrl Shift J

4. он говорит, что loadXMLDoc’ не определен, что мне делать?

5. Что ж, мне нужно время, чтобы создать для вас полный пример html-документа. Я отредактировал свой ответ. У меня это работает в локальной системе. Пожалуйста, скопируйте и вставьте полный html-код в новый файл для тестирования в вашей локальной системе