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="[email protected]" 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);
       }
    }

tuhin47 · Accepted Answer · 2019-08-01 06:20:51Z

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="[email protected]" 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>

Nareen Babu · Accepted Answer · 2019-08-01 10:44:56Z

0

Are you expecting this output ?

var parser = new DOMParser();
var xmlString =
  '<message>\n' +
  '   <senses>\n' +
  '    <sense id="GFDT002" phone="2345234" email="[email protected]" 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>

edited Aug 1, 2019 at 10:44

answered Aug 1, 2019 at 6:15

Nareen Babu

4531 gold badge5 silver badges14 bronze badges

2 Comments

user11766958 Over a year ago

i try that but the table doesn't display

Nareen Babu Over a year ago

@user11766958 - Have you added the div "Result" element in your html ?

Collectives™ on Stack Overflow

create a html table from xml strings

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related