从外部 XML（多个值）填充 HTML table

Question

我在使用 JS 从外部 XML 文档中获取数据时遇到了问题。到目前为止，我一直在关注 AJAX XML 的 w3schools 教程，但我运行遇到了我无法解决的问题。我有一个看起来像这样的 XML：

XML

<root>
 <document-id>
    <author>Tom Riddle</autor>
    <title>abzy</title>
    <year>1995</year>
 </document-id>
 <document-id>
    <author>Tom Riddle</autor>
    <author>Albums Dumbledore</autor>
    <title>abzy</title>
 </document-id>
 <document-id>
    <author>Tom Riddle</autor>
    <year>1995</year>
 </document-id>
</root>

我想访问上面 XML 中的数据并生成包含所有值的 table。我运行感兴趣的是，如果我有多个作者，我的请求将只为每个 TR 元素获取一个作者，如果有两个，它只会将它移到下一个。有没有一种方法可以让我的代码从一个文档 ID 中获取所有作者并将他们放入同一个 td 中？

我虽然使用 for 循环来创建不同的 td 元素会有帮助吗？那看起来如何？

HTML和JS代码

<body>
    <header>
        <h1>Reading Data from XML Files</h1>
    </header>
    <main>

        <button type="button" onclick="loadDoc()">Get my CD collection</button>

        <table id="demo">

        </table>

    </main>   
    <script>
       function loadDoc() {
          const xhttp = new XMLHttpRequest();
          xhttp.onload = function() {
            myFunction(this);
          }
          xhttp.open("GET", "books.xml");
          xhttp.send();
        }
        function myFunction(xml) {
          const xmlDoc = xml.responseXML;
          const x = xmlDoc.getElementsByTagName("document-id");
          console.log(x)
          let table="<tr><th>Author</th><th>Title</th><th>Year</th></tr>"; 
          for (let i = 0; i <x.length; i++) { 
            table += "<tr><td>" +
            x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue == undefined)?"": x[i].getElementsByTagName("author")[0].childNodes[0].nodeValue ) +
            "</td><td>" +
            x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue == undefined)?"": x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue ) +
            "</td><td>" +
            x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue == undefined)?"": x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue ) +
            "</tr>";
          }
          document.getElementById("demo").innerHTML = table;
        }
    </script>
</body>

Answer 1

您可以在 XML 个文档（响应XML）上使用查询选择器。如果它们不是很复杂或不使用名称空间，那效果非常好，此时您可能需要查看 Xpath。

节点内容的标准属性为textContent。

// for the example, create the DOM document from a string
const xmlDocument = (new DOMParser()).parseFromString(getXMLString(), 'text/xml');

const tbody = document.querySelector('#demo tbody');

// get the document-id elements and put them into an array
const books =  Array.from(xmlDocument.querySelectorAll('document-id'));
books.forEach(
   (book) => {
       // a table row for each element
       const tr = tbody.appendChild(document.createElement('tr'));
       
       tr
           .appendChild(document.createElement('td'))
           .textContent = book.querySelector('title')?.textContent || '';
       tr
           .appendChild(document.createElement('td'))
           .textContent = book.querySelector('year')?.textContent || '';
       
       // multiple authors, map nodes to strings and join them
       tr
           .appendChild(document.createElement('td'))
           .textContent = Array.from(book.querySelectorAll('author'))
               .map((author) => author.textContent)
               .join(', ');
   }
);

function getXMLString() {
  return  `<?xml version="1.0" standalone="yes"?>
<root>
 <document-id>
    <author>Tom Riddle</author>
    <title>One</title>
    <year>1995</year>
 </document-id>
 <document-id>
    <author>Tom Riddle</author>
    <author>Albums Dumbledore</author>
    <title>Two</title>
 </document-id>
 <document-id>
    <author>Tom Riddle</author>
    <year>1995</year>
 </document-id>
</root>`
}

td {
  border: 1px solid black;
}

<table id="demo">
  <tbody>
  </tbody>
</table>

从外部 XML（多个值）填充 HTML table

Populating an HTML table from an external XML (multiple Values)

html

javascript

xml

ajax