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
Posts
