How to dynamically populate an HTML Table with XML Data?

Question

I have an XML like below:

<?xml version="1.0" encoding="utf-8"?>
<TestRun id="abc-jhhg-yuh" name="Demo" runUser="Admin" xmlns="http://microsoft.com/schemas/VisualStudio/TeamTest/2010">
 <ResultSummary outcome="Failed">
    <Counters total="5" executed="5" passed="3" failed="2" error="0" timeout="0" aborted="0" inconclusive="0" passedButRunAborted="0" notRunnable="0" notExecuted="0" disconnected="0" warning="0" completed="0" inProgress="0" pending="0" />
  </ResultSummary>
</TestRun>

I have an HTML file, where I want this data to be populated dynamically in a tabular format something like below.

My "script" in HTML goes like this

<!DOCTYPE html>
<html>
<body>
<h1> Test Summary Details </h1> 
<script>
if(window.XMLHttpRequest)
{
    xmlhttp=new XMLHttpRequest();
}
else
{
    xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","Demo.xml",true);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.write("<table border='1' width='25%' style='font-size:15px;'>");
document.write("<tr><th>Result Type</th><th>Count</th></tr>");
var nodes=xmlDoc.getElementsByTagName("ResultSummary");
var total= nodes[0].childNodes[0].getAttributeValue("total");
document.write("total");
document.write("</td><td>");
document.write(total);
document.write("</td><td>");
document.write("</table>");
</script>
</body>
</html>

But I am not able to populate the data. How can I do this?

Answer 1

 // Simulate a http response const mock_response = new Response(`<?xml version="1.0" encoding="utf-8"?> <TestRun id="abc-jhhg-yuh" name="Demo" runUser="Admin" xmlns="http://microsoft.com/schemas/VisualStudio/TeamTest/2010"> <ResultSummary outcome="Failed"> <Counters total="5" executed="5" passed="3" failed="2" error="0" timeout="0" aborted="0" inconclusive="0" passedButRunAborted="0" notRunnable="0" notExecuted="0" disconnected="0" warning="0" completed="0" inProgress="0" pending="0" /> </ResultSummary> </TestRun>`) // use the new fetch api instead of the old XMLHttpRequest // TODO: change url to 'Demo.xml' fetch('https://httpbin.org/get').then(async response => { // use the simulated response const str = await mock_response.text() // TODO: remove above and switch to use the actual response.text() instead // const str = await response.text() const xml = new DOMParser().parseFromString(str, 'text/xml') const counters = xml.querySelector('Counters') const table = document.createElement('table') table.border = 1 const body = table.createTBody() for (let x of 'total,executed,passed,failed,inconclusive,warning,notExecuted'.split(',')) { const row = body.insertRow() const attr = row.insertCell() const value = row.insertCell() attr.innerText = x value.innerText = counters.getAttribute(x) console.log() } document.body.append(table) })

How to dynamically populate an HTML Table with XML Data?

Question

1 answers

solution1
0 2021-05-30 09:35:16

How to dynamically populate an HTML Table with XML Data?

Question

1 answers

solution1 0 2021-05-30 09:35:16

solution1
0 2021-05-30 09:35:16