10/29/2008

Generic XML Display Utility for JavaScript


Wiki Javascript, Wikipedia JavaScript, Generic XML Display Utility for JavaScript, XML processing Java Script, Generic XMl processing JavaScript, XML read from JavaScript, XML from JS

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



12 comments:

  1. Looks like greek to me! Happy Halloween.

    ReplyDelete
  2. Wow - I'm thankful someone knows what that means, because I have no clue.

    ReplyDelete
  3. It looks like greek to me too, but i am trying (somewhat unsucessfully) to learn what at least some of it means

    ReplyDelete
  4. I still pretty much avoid Javascript whenever possible.

    V.

    ReplyDelete
  5. 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.

    ReplyDelete
  6. i'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.

    ReplyDelete
  7. I know its kind of technical stuff, so wanted to make it as simple as I could.

    ReplyDelete
  8. I 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.

    ReplyDelete
  9. This is an excellent review.I would love to read more about this topic.Keep up the good work.

    Regards~

    Prasen Dutta

    Business Development LLC, at web design and development

    ReplyDelete
  10. AnonymousMay 29, 2010

    Hi nice post about XML. That was descriptive in the sense. Check for more @ Stark Solutions

    ReplyDelete
  11. This is great and I appreciate it ,it is handy. Thanks pal!

    ReplyDelete

Got something to say? Don't hold it! Tell it to us.

You Might Like

.....