There are many a times when we require to display the XML at client side using JavaScript. Most of the time when we are interacting with the web services the response is an XML response. The utility I have created is useful to display a XML file in the form of table on browser.
This script can display as many columns as you want on the table. The table headers are populated based on the XML field names which are specified in Field tag <Field>FieldName</Field>
So if you are sending only first name and last name in your XML response then the XML DocStructure will look like this
<DocStructure>
<Field>FirstName</Field>
<Field>LastName</Field>
</DocStructure>
Here is the JavaScript file XMLGenericDisplay.js, which can be used for this.
//Global Variables
var xDoc;
/*
Change below global variable values to match your XML tags.
*/
var rootNode = "RequestResponse";
var fNode = "Field";
var docListNode = "DocList";
var docNode = "Doc";
var valueNode = "Value";
/*
* CSS variables
*/
var dataCSSClass = "row";
var headerCSSClass = "hdr";
/*
* Draw table header from xml document
*/
function drawHeader(tbody) {
var tr, td, i, j, oneRecord, flds;
tbody = document.getElementById(tbody);
// node tree
var data = xDoc.getElementsByTagName(rootNode)[0];
//alert(data);
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);
flds = oneRecord.getElementsByTagName(fNode);
for (j = 0; j < flds.length; j++) {
td = tr.insertCell(tr.cells.length);
td.setAttribute("id",headerCSSClass);
td.innerHTML = flds[j].firstChild.nodeValue;
}
}
}
}
/*
* Draw table data from XML data
*/
function drawData(tbody) {
var tr, td, i, j, k, oneRecord, flds, docs;
tbody = document.getElementById(tbody);
var data = xDoc.getElementsByTagName(rootNode)[0];
//alert(data.childNodes.length);
for (i = 0; i < data.childNodes.length; i++) {
if (data.childNodes[i].nodeName == docListNode) {
oneRecord = data.childNodes[i];
docs = oneRecord.getElementsByTagName(docNode);
for (k = 0; k < docs.length; k++) {
flds = docs[k].getElementsByTagName(valueNode);
tr = tbody.insertRow(tbody.rows.length);
for (j = 0; j < flds.length; j++) {
td = tr.insertCell(tr.cells.length);
td.setAttribute("id",dataCSSClass);
td.innerHTML = flds[j].firstChild.nodeValue;
}
}
}
}
}
/*
* Check that client browser supports XML
* and load external .xml file if its supported.
*/
function checkBrowserSupport(xFile) {
if (document.implementation && document.implementation.createDocument) {
xDoc = document.implementation.createDocument("", "theXdoc", null);
//xDoc = new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") {
if (document.getElementById("msxml").async) {
xDoc = new ActiveXObject("Msxml.DOMDocument");
}
}
var ty = typeof xDoc.load;
if (xDoc && typeof xDoc.load != "undefined") {
// load external filefrom 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 - This method to be called when
* you want to start rendering XML
*/
function loadXML(xFile) {
// confirm browser supports needed features and load .xml file
if (checkBrowserSupport(xFile)) {
// Draw the header
setTimeout("drawHeader('header')", 1000);
//draw the data in table
setTimeout("drawData('data')", 1000);
}
}
This is how you can use it. The CSS file (XMLGenericDisplay.css) for the table is like this, you can change it as per your requirement.
#row {text-align:center;
color: #000000;
text-align:center;
background: url(http://4.bp.blogspot.com/_hpoWLUUuwbc/SHrhRrGZFwI/AAAAAAAAAK8/vfehDBVMWP8/S166/goldMo.JPG) repeat;
}
#hdr {
color: #ffff66;
text-align:center;
background: url(http://4.bp.blogspot.com/_hpoWLUUuwbc/SHvj5jkU4sI/AAAAAAAAALU/jQIGR6H0hqw/S163/bgMo.JPG) repeat;
}
table {
border: solid;
border-color:orange;
}
The XMLGenericDisplay.html file below calls the Javascript and displays the data in Response.xml file.
<html>
<head>
<title>Response</title>
<link rel="stylesheet" type="text/css" href="XMLGenericDisplay.css" />
<script type="text/javascript" src="XMLGenericDisplay.js"></script>
</head>
<body onload="loadXML('Response.xml');">
<h1>Response Data</h1>
<hr>
<table id="Response">
<thead id="header">
</thead>
<tbody id="data"></tbody>
</table>
<!-- Try to load Msxml.DOMDocument ActiveX to assist support verification -->
<object id="msxml" WIDTH="1" HEIGHT="1" classid="CLSID:2933BF90-7B36-11d2-B20E-00C04F983E60" ></object>
</body>
</html>
The Reponse.xml file looks like this.
<?xml version="1.0" encoding="UTF-8"?>
<RequestResponse>
<DocStructure>
<Field>FirstName</Field>
<Field>LastName</Field>
<Field>Address1</Field>
<Field>Address2</Field>
<Field>City</Field>
<Field>State</Field>
<Field>Country</Field>
</DocStructure>
<DocList>
<Doc>
<Value>Priya</Value>
<Value>D</Value>
<Value>add1</Value>
<Value>add2</Value>
<Value>Sunnyvale</Value>
<Value>CA</Value>
<Value>USA</Value>
</Doc>
<Doc>
<Value>Jini</Value>
<Value>Kolher</Value>
<Value>add1</Value>
<Value>add2</Value>
<Value>Chicago</Value>
<Value>IL</Value>
<Value>USA</Value>
</Doc>
<Doc>
<Value>Piyu</Value>
<Value>D</Value>
<Value>add1</Value>
<Value>add2</Value>
<Value>Windsor</Value>
<Value>CT</Value>
<Value>USA</Value>
</Doc>
</DocList>
</RequestResponse>
If your response XML file is different then you may edit the script and change the global variables for your specific node names in the XMLGenericDisplay.js file.
/*
Change below global variable values to match your XML tags.
*/
var rootNode = "RequestResponse";
var fNode = "Field";
var docListNode = "DocList";
var docNode = "Doc";
var valueNode = "Value";
Here is the snapshot of output

Looks like greek to me! Happy Halloween.
ReplyDeleteWow - I'm thankful someone knows what that means, because I have no clue.
ReplyDeleteIt looks like greek to me too, but i am trying (somewhat unsucessfully) to learn what at least some of it means
ReplyDeleteI still pretty much avoid Javascript whenever possible.
ReplyDeleteV.
Good of you to post about what looks like a difficult subject. It is all Greek to me too, but probably not lovers of Javascript.
ReplyDeletei'm like some of the others and get very confused when looking at all of that! i've tried to learn but haven't been successful yet.
ReplyDeleteAhhh coding. Nice stuff!
ReplyDeleteI know its kind of technical stuff, so wanted to make it as simple as I could.
ReplyDeleteI haven't done programming of any nature since basic stuff in high school. Other than a bit of HTML, I'm lost when it comes to these.
ReplyDeleteThis is an excellent review.I would love to read more about this topic.Keep up the good work.
ReplyDeleteRegards~
Prasen Dutta
Business Development LLC, at web design and development
Hi nice post about XML. That was descriptive in the sense. Check for more @ Stark Solutions
ReplyDeleteThis is great and I appreciate it ,it is handy. Thanks pal!
ReplyDelete