從外部XML填充HTML表-有解無憂

我在使用 JS 從外部 XML 檔案中獲取資料時遇到了一個問題。到目前為止，我一直在關注 w3schools 的 AJAX XML 教程，但遇到了一些我無法解決的問題。我有一個如下所示的 XML：

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

我想動態訪問 XML 中的資料并在這樣做的同時創建一個表。它適用于所有檔案共享的一個 DOM 元素，但是一旦我包含年份或標題，它就會給我一個錯誤。我想這是因為樹的某些部分的標簽是空的。有沒有辦法忽略空標簽，如果里面有值，只在列中寫一些東西？感謝您的時間和知識。

這是相關的 HTML

<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  
            "</td><td>"  
            x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue  
            "</td><td>"  
            x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue  
            "</tr>";
          }
          document.getElementById("demo").innerHTML = table;
        }
    </script>
</body>

uj5u.com熱心網友回復：

在嘗試訪問子項之前檢查是否存在。

function getText(node, tag) {
  var elem = node.getElementsByTagName(tag);
  return elem ? elem.[0].childNodes[0].nodeValue : '';
}

for (let i = 0; i <x.length; i  ) { 
    var cells = ['author', 'title', 'year'].map(function (tag) {
      return "<td>"   getText(x[i], tag)   "</td>";
    }).join("");

    table  = "<tr>"   cells   "</tr>");
}

uj5u.com熱心網友回復：

嘗試使用在線解決方案來檢查 xml 中是否存在標簽

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  
         "</td><td>"     ((x[i].getElementsByTagName("title")[0] == undefined)?"": x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue )     
        "</td><td>"  
      ((x[i].getElementsByTagName("year")[0] == undefined)?"": x[i].getElementsByTagName("year")[0].childNodes[0].nodeValue )     
        "</tr>";
      }
      
      document.getElementById("demo").innerHTML = table;
    }

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/424088.html

標籤：javascript html jQuery 阿贾克斯 xml

上一篇：API如何與CORS策略一起使用以服務多個應用程式

下一篇：根據選擇的單選值進行特定查詢