Home Javascript Javascriptexamples JavaScript XML to HTML

Related Tutorials


 
 

Share on Google+Share on Google+

JavaScript XML to HTML

Advertisement
This page discusses - JavaScript XML to HTML

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:

 

       

Advertisements

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: April 18, 2011

Related Tutorials

Discuss: JavaScript XML to HTML  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
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: Christoff@cstruter.com - (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; } }
DMCA.com