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