Quiero mostrar el código xml como una tabla para una mejor legibilidad. No quiero usar un analizador XML, solo un convertidor rápido de copiar y pegar. Pero la forma en que lo estoy codificando en este momento, todavía consume mucho tiempo. ¿Hay alguna manera de convertirlo dinámicamente? Entonces, para cada etiqueta en el código xml, ¿una nueva fila/celda, etc.?
En este ejemplo, el XML ya está en el área de texto. Contiene 2 empleados. (Esto será mucho más, es por eso que dije que consume mucho tiempo) Con un botón, primero lo convierte a HTML interno de un div llamado "salida". Pensé que era necesario introducir los datos en el documento y convertirlo en una tabla. Pero como puede ver, eso significaría que tendría que ajustar el código JS + tabla para todos los empleados. Y algunas veces el xml contendrá empleados de números aleatorios. Así que una forma dinámica sería mejor. Gracias de antemano
function convertxml() { var getxml = document.getElementById("inputxml").value; document.getElementById("outputxml").innerHTML = getxml; name = document.getElementsByTagName("name")[0].childNodes[0].nodeValue; document.getElementById("name").innerHTML = name; adress = document.getElementsByTagName("adress")[0].childNodes[0].nodeValue; document.getElementById("adress").innerHTML = adress; birthday = document.getElementsByTagName("birthday")[0].childNodes[0].nodeValue; document.getElementById("birthday").innerHTML = birthday; } input, button { display: block; } #outputxml { display: none; } textarea { height: 300px; width: 500px; } <textarea id="inputxml"> <employee> <name>John Doe</name> <birthday>01-01-1990</birthday> <adress>Streetname 123</adress> </employee> <employee> <name>Jane Doe</name> <birthday>02-02-2000</birthday> <adress>Streetname 123</adress> </employee> </textarea> <button id="convertxml" type="button" onClick="convertxml()">Convert</button> <div id="outputxml"></div> <table> <tr> <th></th> </tr> <tr> <td class="label">Name:</td> <td id="name"></td> </tr> <tr> <td class="label">Adress:</td> <td id="adress"></td> </tr> <tr> <td class="label">Birthday:</td> <td id="birthday"></td> </tr>No colocaría el xml en un <textarea> a menos que sea absolutamente necesario, pero, de manera más general, crearía una tabla dinámica, usando xpath, de esta manera:
function convertxml() { dest = document.querySelector('#theTable'); let area = document.evaluate( '//textarea', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); const data = new DOMParser().parseFromString( area.snapshotItem(0).textContent, 'text/xml' ); results = data.evaluate( '//employee', data, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); for (let i = 0; i < results.snapshotLength; i++) { let node = results.snapshotItem(i); let info = data.evaluate( './/*', node, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); let row = []; for (let i = 0; i < info.snapshotLength; i++) { let item = info.snapshotItem(i); row.push(item.textContent); } dest.insertAdjacentHTML( 'beforeend', `<tr><td>${row[0]}</td><td>${row[1]}</td></td><td>${row[2]}</td></tr>` ); } } <!doctype html> <html> <head> <link rel="stylesheet" href="lib/style.css"> <script src="lib/script.js"></script> </head> <body> <textarea id="inputxml"> <doc> <employee> <name>John Doe</name> <birthday>01-01-1990</birthday> <adress>Streetname 123</adress> </employee> <employee> <name>Jane Doe</name> <birthday>02-02-2000</birthday> <adress>Streetname 124</adress> </employee> </doc> </textarea> <button id="convertxml" type="button" onClick="convertxml()">Convert</button> <table id='theTable' border='1'><tr><td>Name</td><td>Birthday</td><td>Address</td></tr></table> </body> </html>