CODEWITHSUNDEEP
javascriptxml
user11766958
user11766958

Reputation: 419

create a html table from xml strings

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);
       }
    }

Upvotes: 0

Views: 243

Answers (2)

Nareen Babu
Nareen Babu

Reputation: 453

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>

Upvotes: 0

tuhin47
tuhin47

Reputation: 6058

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>

Upvotes: 1

Related Questions