Entonces, estoy tratando de escribir un archivo XML como una tabla en una página HTML dentro de un div con id "div1", pero no puedo hacer que la tabla aparezca en la página y estoy atascado. No tiene que estar necesariamente dentro de un div, pero tiene que aparecer como una tabla HTML en la página... Soy nuevo en javascript y tengo problemas para encontrar una solución, pero hay muy pocos ejemplos similares en línea, así que espero que alguien pueda ayudar... XML LA MESA DEBE VERSE ASÍ
Esta es la página HTML....
<!DOCTYPE html> <html> <head> <title>kol2</title> </head> <body> <div id="div1"></div> <script src="kol2.js"></script> </body> </html>Aquí está el archivo 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>Y aquí está el código javascript que tengo hasta ahora...
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>");Probablemente esté buscando una manera de crear dinámicamente una tabla desde xml, algo como lo siguiente (lo explicaré en línea):
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>