I want to display xml code as a table for better readability. I don't want to use XML parser, just a quick copy, paste converter. But the way I'm coding it right now, is still very time consuming. Is there a way to convert it dynamically? So for every tag in the xml code a new row/cell etc?
In this example the XML is already in the text area. It contains 2 employees. (This will be a lot more, that's why I said time consuming) With a button you first convert it to innerHTML of a div called "output". I thought that was neccesairy to get the data into the document and convert it to a table. But as you can see, that would mean I would have to adjust the JS code + table for all employees. And some times the xml will contain random number employees. So a dynamical way would be better. Thank you in advance
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>I wouldn't place the xml in a <textarea> unless it's absolutely necessary, but, more generally, I would create a dynamic table, using xpath, this way:
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>