create a html table from xml strings

Question

I want to create an HTML table from XML string using javascript. I've created the table but not sure how to pass the XML strings to the table. i want the table to have four columns with the column header name: (id, phone, email, address).

 <h1>Test</h1> <script> var attrs = ["id", "phone", "email", "address"]; var xmlString = '<message>\\n' + ' <senses>\\n' + ' <sense id="GFDT002" phone="2345234" email="test@email.com" address="60 test street" >\\n' + ' <definition><b>test</b> are <a href="http://test.com">test</a>test<a href="test.com">test</a>,test <a href="http://test.com">genus</a> <i><b>Apteryx</b></i> test <b>test</b>.test <a href="http://test.com">test</a>test <a href="http://test.com">egg</a> test.</definition>\\n' + ' </sense>\\n' + ''; </script> 

 var parser = new DOMParser(); var xmlDoc =parser.parseFromString(xmlString, "text/xml") var test =xmlDoc.getElementsByTagName("message"); //create table var myTableDiv = document.getElementById("mytable") var table = document.createElement('table'); var tableBody = document.createElement('tbody'); table.appendChild(tableBody); for (var i=0; i<3; i++){ var tr = document.createElement('tr'); tableBody.appendChild(tr); for (var j=0; j<4; j++){ var td = document.createElement('td'); td.width='75'; td.appendChild(document.createTextNode("test " + i + "," + j)); tr.appendChild(td); } } 

Answer 1

Here I made the table.

 var parser = new DOMParser(); var xmlDoc = parser.parseFromString(xmlString, "text/xml") var test = xmlDoc.getElementsByTagName("sense"); //create table var myTableDiv = document.getElementById("mytable") var table = document.createElement('table'); var tableBody = document.createElement('tbody'); table.appendChild(tableBody); var tr = document.createElement('tr'); tableBody.appendChild(tr); attrs.forEach(val => { var td = document.createElement('th'); td.width = '100'; td.innerHTML = val; tr.appendChild(td); }) Object.keys(test).forEach(el => { var tr = document.createElement('tr'); tableBody.appendChild(tr); attrs.forEach(val => { var td = document.createElement('td'); td.width = '100'; td.innerHTML = test[el].getAttribute(val); tr.appendChild(td); }); }); myTableDiv.appendChild(table); 

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } 

 <h1>Test</h1> <div id='mytable'></div> <script> var attrs = ["id", "phone", "email", "address"]; var xmlString = '<message>\\n' + ' <senses>\\n' + ' <sense id="GFDT002" phone="2345234" email="test@email.com" address="60 test street" >\\n' + ' <definition><b>test</b> are <a href="http://test.com">test</a>test<a href="test.com">test</a>,test <a href="http://test.com">genus</a> <i><b>Apteryx</b></i> test <b>test</b>.test <a href="http://test.com">test</a>test <a href="http://test.com">egg</a> test.</definition>\\n' + ' </sense>\\n' + ''; </script> 

Answer 2

Are you expecting this output ?

 var parser = new DOMParser(); var xmlString = '<message>\\n' + ' <senses>\\n' + ' <sense id="GFDT002" phone="2345234" email="test@email.com" address="60 test street" >\\n' + ' <definition><b>test</b> are <a href="http://test.com">test</a>test<a href="test.com">test</a>,test <a href="http://test.com">genus</a> <i><b>Apteryx</b></i> test <b>test</b>.test <a href="http://test.com">test</a>test <a href="http://test.com">egg</a> test.</definition>\\n' + ' </sense>\\n' + ''; var attrs = ["id", "phone", "email", "address"]; var xmlDoc = parser.parseFromString(xmlString, "text/xml") var test = xmlDoc.getElementsByTagName("sense"); //create table var myTableDiv = document.getElementById("mytable") var table = document.createElement('table'); var tableBody = document.createElement('tbody'); table.appendChild(tableBody); // For Adding Header for (var i = 0; i < test.length; i++) { var tr = document.createElement('tr'); for (var j = 0; j < attrs.length; j++) { var td = document.createElement('th'); td.width = '75'; var span = document.createElement("span"); span.innerText = attrs[j]; td.appendChild(span); tr.appendChild(td); } tableBody.appendChild(tr); } // For Adding data for (var i = 0; i < test.length; i++) { var tr = document.createElement('tr'); for (var j = 0; j < attrs.length; j++) { var td = document.createElement('td'); td.width = '75'; var span = document.createElement("span"); span.innerText = test[i].getAttribute(attrs[j]); td.appendChild(span); tr.appendChild(td); } tableBody.appendChild(tr); } var oResult = document.getElementById("Result"); oResult.appendChild(table); 

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } 

 <div id="Result"></div>