Home • Programming • XML Jan 11th, 2016 at 05:56 PM

Displaying XML data using JavaScript

cd_catalog.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<!-- Edited by XMLSpy® -->
<CATALOG>
	<CD>
		<TITLE>Empire Burlesque</TITLE>
		<ARTIST>Bob Dylan</ARTIST>
		<COUNTRY>USA</COUNTRY>
		<COMPANY>Columbia</COMPANY>
		<PRICE>10.90</PRICE>
		<YEAR>1985</YEAR>
	</CD>	
	<CD>
		<TITLE>The very best of</TITLE>
		<ARTIST>Cat Stevens</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Island</COMPANY>
		<PRICE>8.90</PRICE>
		<YEAR>1990</YEAR>
	</CD>
	<CD>
		<TITLE>Stop</TITLE>
		<ARTIST>Sam Brown</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>A and M</COMPANY>
		<PRICE>8.90</PRICE>
		<YEAR>1988</YEAR>
	</CD>
	<CD>
		<TITLE>Bridge of Spies</TITLE>
		<ARTIST>T'Pau</ARTIST>
		<COUNTRY>UK</COUNTRY>
		<COMPANY>Siren</COMPANY>
		<PRICE>7.90</PRICE>
		<YEAR>1987</YEAR>	</CD>

</CATALOG>

display_xml.htm

<html>
<head>
<script type="text/javascript">
function loadXMLDoc(url){
  var xmlhttp;
  var txt,x,xx,i;
  if (window.XMLHttpRequest){
	  // code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
  }else{// code for IE6, IE5
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
	  txt="<table border='1'><tr><th>Title</th><th>Artist</th><th>Country</th><th>Company</th><th>Price</th><th>Year</th></tr>";
	  x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
		for (i=0;i<x.length;i++){
			  txt=txt + "<tr>";
			  //----------------Title-------------------//
			  xx=x[i].getElementsByTagName("TITLE");
			  {
				try{
				  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
				} catch (er){
				  txt=txt + "<td> </td>";
				}
			  }
			  //----------------Artist-------------------//
			  xx=x[i].getElementsByTagName("ARTIST");
			  {
				try{
				  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
				} catch (er){
				  txt=txt + "<td> </td>";
				}
			  }
			  //-----------------Country------------------//
			  xx=x[i].getElementsByTagName("COUNTRY");
			 
				try{
				  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
				} catch (er){
				  txt=txt + "<td> </td>";
				}
			  
			  //--------------------Company---------------//
			   xx=x[i].getElementsByTagName("COMPANY");
			  {
				try{
				  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
				} catch (er){
				  txt=txt + "<td> </td>";
				}
			  }
			  //-----------------Price------------------//
			   xx=x[i].getElementsByTagName("PRICE");
			  {
				try{
				  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
				} catch (er){
				  txt=txt + "<td> </td>";
				}
			  }
			  //------------------Year-------------------//
			   xx=x[i].getElementsByTagName("YEAR");
			  
				  txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
				
			  //------------------------------------//
			  txt=txt + "</tr>";
		}//end for
	  txt=txt + "<tr><th>Title</th><th>Artist</th><th>Country</th><th>Company</th><th>Price</th><th>Year</th></tr></table>";
	  document.getElementById('txtCDInfo').innerHTML=txt;
	  }//end if
  }//end event function
  xmlhttp.open("GET",url,true);
  xmlhttp.send();
}//end function
</script>
</head>
<body>

<div id="txtCDInfo">

</div>
<button onClick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
</body>
</html>

Displaying XML data using JavaScript

Comments 0

Share