JavaScript XML to HTML

In this section, you will learn how to display the XML data into HTML table.

As you have already learned how to access and manipulate the DOM parser in the previous section. Here we have used the DOM reference to display the data of XML document into html table. For this, we have created XML document object and allow the DOM parser to load the "data.xml" file. Then we have created an HTML table to display the XML data. The getElementsByTagName() gets all XML Employee nodes and for each Employee node, we display data from the XML elements name and address as table data.

Following code gets the values from the XML document and display it as the table data:

document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue)

Here is the data.xml file:

<Company>
<Employee>
<name>Tina</name>
<address>Juhu,Mumbai</address>
</Employee>

<Employee>
<name>Angelina</name>
<address>Rohini,Delhi</address>
</Employee>
</Company>

Here is the code:

<html>
<h2>Display XML data in HTML</h2>
<script type="text/javascript">
var xmlDoc=null;
if (window.ActiveXObject){
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
else if (document.implementation.createDocument){
xmlDoc=document.implementation.createDocument("","",null);
}
else{
alert('Browser cannot handle this script');
}
if (xmlDoc!=null){
xmlDoc.async=false;
xmlDoc.load("data.xml");
document.write("<table border='1'>");
document.write("<tr>");
document.write("<th>");
document.write("NAME"+"<br>");
document.write("</th>");

document.write("<th>");
document.write("ADDRESS"+"<br>");
document.write("</th>");
document.write("</tr>");

var x=xmlDoc.getElementsByTagName("Employee");
for (i=0;i<x.length;i++)
{
document.write("<tr>");
document.write("<td>");
document.write(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
document.write("</td>");

document.write("<td>");
document.write(x[i].getElementsByTagName("address")[0].childNodes[0].nodeValue);
document.write("</td>");
document.write("</tr>");
}
document.write("</table>");
}
</script>
</html>

Output will be displayed as:

Download source Code:

Spring Framework Training

R Programming Training

Share on Google+

JavaScript XML to HTML

Posted on: April 18, 2011 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Related Tutorials

How to check if a string exists in a string in JavaScript?

JavaScript toLocaleLowerCase method

JavaScript Sort Dates

JavaScript Zoom in and Zoom out

JavaScript XML to HTML

Discuss: JavaScript XML to HTML

Post your Comment

Comments:2

Alyly
February 17, 2013
IT

i want learn about the structure of web deverloper

vpip
January 10, 2013
can't display rssfeed on all browsers

Hi ,i have found a code to display the rss but works only in mozilla.i have use 3files(rss.html,rssfeed.js,rss.xml)can anyone help to display rss on all browsers including [safari,mozila firefox, crome...] rss.js /* Simple Javascript RSS Reader Version 1.0 Copyright (c) 2006 CS Truter Written by Christoff Truter email: [email protected] - (Please let me know if you intend to use the script) */ /* Replace all occurances of a string (Parameters) totalValue:'complete string' oldValue:'value to be replaced' newValue:'value used for replace' */ function Replace(totalValue,oldValue,newValue) { while(totalValue.indexOf(oldValue) > -1) totalValue=totalValue.replace(oldValue,newValue); return totalValue; } /* Get XML Node (Parameters) TagName:'XML Element' node:'Element row number' */ function getNode(TagName, node) { var currentNode = (node == null) ? xmlDoc.getElementsByTagName(TagName) : items[node].getElementsByTagName(TagName); if(currentNode.length > 0) return currentNode[0].firstChild.nodeValue; } /* Load XML Object (Parameters) rssFeed:'RSS File' Body:'Layer for RSS Body' Title:'Layer for RSS Title' */ function ReadRSS(rssFeed, Body, Title) { rssTitle = document.getElementById(Title); rssBody = document.getElementById(Body); if (window.ActiveXObject) { var errorHappendHere = "Check Browser and security settings"; xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.load(rssFeed); items=xmlDoc.getElementsByTagName('item'); } else if (window.XMLHttpRequest) { var errorHappendHere = "Error handling XMLHttpRequest request"; var d = new XMLHttpRequest(); d.open("GET", rssFeed, false); d.send(null); xmlDoc = d.responseXML; items=xmlDoc.getElementsByTagName('item'); } else { var errorHappendHere = "Error."; xmlDoc = document.implementation.createDocument("", "", null); xmlDoc.async = false; xmlDoc.load(rssFeed); items=xmlDoc.getElementsByTagName('item'); } //xmlDoc.async=false; //xmlDoc.load(rssFeed); //items=xmlDoc.getElementsByTagName('item'); SetRSSTemplates(); } /* Set HTML Template Did it this way to make the look and feel of the feed easy customizable, dont like mixing layout with code. */ function SetRSSTemplates() { if (rssBody) { var buffer = ""; for(var i=0; i< items.length; i++) { var output = (document.all) ? Replace(rssBody.innerHTML,"(::Link::)",getNode('link',i)) : Replace(rssBody.innerHTML,"%28::Link::%29",getNode('link',i)); output = Replace(output,"(::Title::)",getNode('title',i)); output = Replace(output,"(::Pubdate::)",getNode('pubDate',i)); output = Replace(output,"(::Description::)",getNode('description',i)); output = Replace(output,"(::Link::)",getNode('link',i)); buffer+=output; } rssBody.innerHTML = buffer; } if (rssTitle) { var output = Replace(rssTitle.innerHTML,"(::Title::)",getNode('title')); output = (document.all) ? Replace(output,"(::Link::)",getNode('link')) : Replace(output,"%28::Link::%29",getNode('link')); output = Replace(output,"(::Description::)",getNode('description')); output = Replace(output,"(::Link::)",getNode('link')); rssTitle.innerHTML = output; } }

Ads