Populating an HTML table from an external XML-CodePudding

I have come across a problem while fetching data from an external XML document with JS. I have been following the w3schools tutorial for AJAX XML so far, but I ran into something I couldn't solve. I have a XML that looks like this:

<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>

I want to dynamically access the data inside the XML and create a table while doing so. It works fine for the one DOM Element all documents share, but it gives me an error as soon as I include year or title. I guess it's because the tags are empty in some parts of the tree. Is there a way to ignore empty tags and only write something in the column if there is a value inside? Thank you for your time and knowledge.

THIS IS THE ASSOCIATED 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>

CodePudding user response：

try this with in line solution to check if tag exist in 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;
    }

CodePudding user response：

Check for existence before you try to access the children.

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>");
}