I am trying to write an XML file as a table on a HTML page inside a div with id "div1" but-CodePudding

So I am trying to write an XML file as a table on a HTML page inside a div with id "div1" but I cant get the table to appear on the page and I am stuck. It doesnt have to necessarily be inside a div but it has to appear as HTML table on page.. I am new to javascript and struggling to find a solution but there are very few similar examples online so I hope someone can help... XML TABLE SHOULD LOOK LIKE THIS

This is the HTML page....

<!DOCTYPE html>
<html>
    <head>
        <title>kol2</title>
    </head>

    <body>

        <div id="div1"></div>    
        <script src="kol2.js"></script>
    </body>

    
    
</html>

Here is the XML file...

<?xml version="1.0"?>
<nekretnine xmlns:h="http://www.nekretnine.hr">
    <h:nekretnina>
        <h:ID>1211</h:ID>
        <h:Adresa>Vukovarska 121</h:Adresa>
        <h:Grad>Zagreb</h:Grad>
        <h:Tip>Stan</h:Tip>
    </h:nekretnina>
    <h:nekretnina>
        <h:ID>2123</h:ID>
        <h:Adresa>Horvatova 13</h:Adresa>
        <h:Grad>Biograd</h:Grad>
        <h:Tip>Kuća</h:Tip>
    </h:nekretnina>
</nekretnine>

And here is the javascript code I have so far..

if (window.XMLHttpRequest)  
xmlhttp=new XMLHttpRequest();

xmlhttp.open("GET","nekretnine.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("nekretnina");

for (i=0;i<x.length;i  )
{
    
document.write("<tr><td>");
document.write(x[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue);
document.write("</td><td>");
document.write(x[i].getElementsByTagName("Adresa")[0].childNodes[0].nodeValue);document.write("</td><td>");
document.write(x[i].getElementsByTagName("Grad")[0].childNodes[0].nodeValue);document.write("</td><td>");
document.write(x[i].getElementsByTagName("Tip")[0].childNodes[0].nodeValue); document.write("</td></tr>");

}

document.write("</table>");

CodePudding user response：

You are probably looking for a way to dynamically create a table from xml - something like the below (I'll explain inline):

xml = `<?xml version="1.0"?>
<nekretnine xmlns:h="http://www.nekretnine.hr">
    <h:nekretnina>
        <h:ID>1211</h:ID>
        <h:Adresa>Vukovarska 121</h:Adresa>
        <h:Grad>Zagreb</h:Grad>
        <h:Tip>Stan</h:Tip>
    </h:nekretnina>
    <h:nekretnina>
        <h:ID>2123</h:ID>
        <h:Adresa>Horvatova 13</h:Adresa>
        <h:Grad>Biograd</h:Grad>
        <h:Tip>Kuća</h:Tip>
    </h:nekretnina>
</nekretnine>

`;
//since you're parsing xml, we'll use xpath to search it; first create
//a helper function for that:
const docEval = (doc, expr, context) =>
  doc.evaluate(expr, context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,  null
  );

//parse the xml string
domdoc = new DOMParser().parseFromString(xml, "text/xml");
//locate the place in the html table where the result will be inserted
dest = document.querySelector("#theTable");

//locate the data
neks = docEval(domdoc, './/*[local-name()="nekretnina"]', domdoc);

for (let i = 0; i < neks.snapshotLength; i  ) {
  //open the table row
  row = `<tr>`;
  let nek = neks.snapshotItem(i);
  entries = docEval(domdoc, ".//*", nek);
  for (let i = 0; i < entries.snapshotLength; i  ) {
    let entry = entries.snapshotItem(i);
    info = docEval(domdoc, ".//text()", entry);
    //add the data to the row
    row  = `<td>${info.snapshotItem(0).nodeValue}</td>`;
  }
  //close the row
  row  = `</tr>`;
  //insert the row in the destination
  dest.insertAdjacentHTML("beforeend", row);
}

<table id='theTable' border='1'><tr><td>ID</td><td>Adres</td><td>Grad</td><td>Tip</td></tr></table>