ASP.NET - how to convert xml file to table using javascript

Asked By balaji mogadali on 16-Nov-11 06:20 AM

hi frds

how to create a table using this following xml string

<Root NoOfTables="1"><Table Name="User" NoOfRows="1" NoOfColumns="7" Fields="Userid,Password,Username,Validfrom,Validto,Roleid,OpCode"><User Userid="USER000012" Password="12345" Username="TOBIAS" Validfrom="" Validto="" Roleid="ROLE000012" OpCode="C" /></Table></Root>

How can i convert this xml columns as columns in data storage in html5

pls help

dipa ahuja replied to balaji mogadali on 16-Nov-11 06:26 AM

<script type="text/javascript">
function showResult(){
var xmlDoc=new ActiveXObject("MSXML.DOMDocument");
xmlDoc.async="false"; xmlDoc.load("abc.xml");
var students=xmlDoc.documentElement;
var student = students.childNodes(0);
var rows = students.childNodes.length; v
ar cols = student.childNodes.length;
var body = document.getElementsByTagName("body")[0];
//var tabl = document.createElement("table");
var tabl = document.getElementById("studentinfo");
var tblBody = document.createElement("tbody");
for (var i = 0; i < rows; i++) {
var row = document.createElement("tr");
student = students.childNodes(i);
for (var j = 0; j < cols; j++) {
var cell = document.createElement("td");
var cellText = document.createTextNode(student.childNodes(j).firstChild.text); cell.appendChild(cellText);
row.appendChild(cell);
}
tblBody.appendChild(row);
tabl.appendChild(tblBody);
tabl.setAttribute("border", "2");
}
  </script>

http://binodsuman.blogspot.com/2009/05/parse-xml-file-in-javascript-part-2.html

Jitendra Faye replied to balaji mogadali on 16-Nov-11 06:36 AM

Follow this example-


<html>
<head>
<title>Embedding External XML Data</title>
<style type="text/css">
body {background-color:#ffffff}
table {table-collapse:collapse; border-spacing:0}
td {border:2px groove black; padding:7px}
th {border:2px groove black; padding:7px}
.ctr {text-align:center}
</style>
<script language="JavaScript" type="text/javascript">
// global reference to XML document object
var xDoc;

// Draw table from xDoc document tree data
function drawTable(tbody) {
  var tr, td, i, j, oneRecord;
  tbody = document.getElementById(tbody);
  // node tree
  var data = xDoc.getElementsByTagName("season")[0];
  // for td class attributes
  var classes = ["ctr","","","","ctr"];
  for (i = 0; i < data.childNodes.length; i++) {
    // use only 1st level element nodes
    if (data.childNodes[i].nodeType == 1) {
      // one bowl record
      oneRecord = data.childNodes[i];
      tr = tbody.insertRow(tbody.rows.length);
      td = tr.insertCell(tr.cells.length);
      td.setAttribute("class",classes[tr.cells.length-1]);
      td.innerHTML = oneRecord.getElementsByTagName("number")[0].firstChild.nodeValue;
      td = tr.insertCell(tr.cells.length);
      td.setAttribute("class",classes[tr.cells.length-1]);
      td.innerHTML = oneRecord.getElementsByTagName("year")[0].firstChild.nodeValue;
      td = tr.insertCell(tr.cells.length);
      td.setAttribute("class",classes[tr.cells.length-1]);
      td.innerHTML = oneRecord.getElementsByTagName("winner")[0].firstChild.nodeValue;
      td = tr.insertCell(tr.cells.length);
      td.setAttribute("class",classes[tr.cells.length-1]);
      td.innerHTML = oneRecord.getElementsByTagName("loser")[0].firstChild.nodeValue;
      td = tr.insertCell(tr.cells.length);
      td.setAttribute("class",classes[tr.cells.length-1]);
      td.innerHTML = oneRecord.getElementsByTagName("winscore")[0].firstChild.nodeValue + " - " + oneRecord.getElementsByTagName("losscore")[0].firstChild.nodeValue;
    }
  }
}
// verify that browser supports XML features and load external .xml file
function verifySupport(xFile) {
  if (document.implementation && document.implementation.createDocument) {
    // this is the W3C DOM way, supported so far only in NN6
    xDoc = document.implementation.createDocument("", "theXdoc", null);
  } else if (typeof ActiveXObject != "undefined") {
    // make sure real object is supported (sorry, IE5/Mac)
    if (document.getElementById("msxml").async) {
      xDoc = new ActiveXObject("Msxml.DOMDocument");
    }
  }
  if (xDoc && typeof xDoc.load != "undefined") {
    // load external file (from same domain)
    xDoc.load(xFile);
    return true;
  } else {
    var reply = confirm("This example requires a browser with XML support, such as IE5+/Windows or Netscape 6+.\n \nGo back to previous page?");
    if (reply) {
      history.back();
    }
  }
  return false;
}

// initialize first time -- invoked onload
function init(xFile) {
  // confirm browser supports needed features and load .xml file
  if (verifySupport(xFile)) {
    // let file loading catch up to execution thread
    setTimeout("drawTable('bowlData')", 1000);
  }
}
</script>
</head>
<body onload="init('superBowls.xml');">
<h1>Super Bowl Games</h1>
<hr>
<table id="bowlGames">
<thead>
<tr><th>Bowl</th>
  <th>Year</th>
  <th>Winner</th>
  <th>Loser</th>
  <th>Score (Win or Lose)</th>
</tr>
</thead>
<tbody id="bowlData"></tbody>
</table>

<object id="msxml" WIDTH="1" HEIGHT="1" classid="CLSID:2933BF90-7B36-11d2-B20E-00C04F983E60" ></object>
</body>
</html>

Reference from-

http://www.java2s.com/Code/JavaScript/Development/DisplayXMLcontentinHTMLtable.htm

Jitendra Faye replied to balaji mogadali on 16-Nov-11 06:36 AM

Follow this example-


<html>
<head>
<title>Embedding External XML Data</title>
<style type="text/css">
body {background-color:#ffffff}
table {table-collapse:collapse; border-spacing:0}
td {border:2px groove black; padding:7px}
th {border:2px groove black; padding:7px}
.ctr {text-align:center}
</style>
<script language="JavaScript" type="text/javascript">
// global reference to XML document object
var xDoc;

// Draw table from xDoc document tree data
function drawTable(tbody) {
  var tr, td, i, j, oneRecord;
  tbody = document.getElementById(tbody);
  // node tree
  var data = xDoc.getElementsByTagName("season")[0];
  // for td class attributes
  var classes = ["ctr","","","","ctr"];
  for (i = 0; i < data.childNodes.length; i++) {
    // use only 1st level element nodes
    if (data.childNodes[i].nodeType == 1) {
      // one bowl record
      oneRecord = data.childNodes[i];
      tr = tbody.insertRow(tbody.rows.length);
      td = tr.insertCell(tr.cells.length);
      td.setAttribute("class",classes[tr.cells.length-1]);
      td.innerHTML = oneRecord.getElementsByTagName("number")[0].firstChild.nodeValue;
      td = tr.insertCell(tr.cells.length);
      td.setAttribute("class",classes[tr.cells.length-1]);
      td.innerHTML = oneRecord.getElementsByTagName("year")[0].firstChild.nodeValue;
      td = tr.insertCell(tr.cells.length);
      td.setAttribute("class",classes[tr.cells.length-1]);
      td.innerHTML = oneRecord.getElementsByTagName("winner")[0].firstChild.nodeValue;
      td = tr.insertCell(tr.cells.length);
      td.setAttribute("class",classes[tr.cells.length-1]);
      td.innerHTML = oneRecord.getElementsByTagName("loser")[0].firstChild.nodeValue;
      td = tr.insertCell(tr.cells.length);
      td.setAttribute("class",classes[tr.cells.length-1]);
      td.innerHTML = oneRecord.getElementsByTagName("winscore")[0].firstChild.nodeValue + " - " + oneRecord.getElementsByTagName("losscore")[0].firstChild.nodeValue;
    }
  }
}
// verify that browser supports XML features and load external .xml file
function verifySupport(xFile) {
  if (document.implementation && document.implementation.createDocument) {
    // this is the W3C DOM way, supported so far only in NN6
    xDoc = document.implementation.createDocument("", "theXdoc", null);
  } else if (typeof ActiveXObject != "undefined") {
    // make sure real object is supported (sorry, IE5/Mac)
    if (document.getElementById("msxml").async) {
      xDoc = new ActiveXObject("Msxml.DOMDocument");
    }
  }
  if (xDoc && typeof xDoc.load != "undefined") {
    // load external file (from same domain)
    xDoc.load(xFile);
    return true;
  } else {
    var reply = confirm("This example requires a browser with XML support, such as IE5+/Windows or Netscape 6+.\n \nGo back to previous page?");
    if (reply) {
      history.back();
    }
  }
  return false;
}

// initialize first time -- invoked onload
function init(xFile) {
  // confirm browser supports needed features and load .xml file
  if (verifySupport(xFile)) {
    // let file loading catch up to execution thread
    setTimeout("drawTable('bowlData')", 1000);
  }
}
</script>
</head>
<body onload="init('superBowls.xml');">
<h1>Super Bowl Games</h1>
<hr>
<table id="bowlGames">
<thead>
<tr><th>Bowl</th>
  <th>Year</th>
  <th>Winner</th>
  <th>Loser</th>
  <th>Score (Win or Lose)</th>
</tr>
</thead>
<tbody id="bowlData"></tbody>
</table>

<object id="msxml" WIDTH="1" HEIGHT="1" classid="CLSID:2933BF90-7B36-11d2-B20E-00C04F983E60" ></object>
</body>
</html>

Reference from-

http://www.java2s.com/Code/JavaScript/Development/DisplayXMLcontentinHTMLtable.htm