Converting an XML document to HTML using Javascript and HTML

Hi,

I need to convert an XML document to HTML using Javascript and HTML?
Could any of you point me in the right direction?

Thanks
Alex

Well you could use XSLT and not use HTML and JavaScript.

How are you getting the XML Document, through Ajax?

Eric

My requirement is to keep the XML file locally in my machine.
Then to use javascript to load the XML and search for a text field and display the record in HTML
Could you point me in the right direction?

Solomon

Eric is right you might XSLT to work out fine for you requirements.

Read up -> http://www.w3schools.com/xsl/xsl_client.asp
More information on XSLT --> http://www.w3schools.com/xsl/

HTH

Hi,

I got your point.
But to be more precise on what I am looking for.
I will have an HTML form having 3 fields : Title , Artist and Country.
When I enter data into these fields , it should search against the XML and display into the screen.
I am doing some proof of concept on this, meanwhile if you guys have any hint, please provide.

Thanks
Solomon

JavaScript can not read local XML files do to security restrictions. The file has to live on the server for it to be read.

Eric

Hi,

Please find below the code to perform the task:

<html>
<head>
<title>Searching for text strings in an XML document</title>

function search_Tree() {
  var e_values   = '';
  var title = document.all.title.value;
  var artist = document.all.artist.value;
  var country = document.all.country.value;
  var company = document.all.company.value;
  var price = document.all.price.value;
  var year = document.all.year.value;

objXMLDoc = document.getElementById("CDCatalog").XMLDocument;     //get XML Doc
  theRoot = objXMLDoc.documentElement;
  namedNodes = theRoot.getElementsByTagName("TITLE");
  var match = 'Y';

for ( i = 0; i < namedNodes.length; i++) {
       if ( namedNodes(i).childNodes(0) != null ) {
         thisNode = namedNodes(i).childNodes(0).nodeValue;
         if ( (title == '') || (thisNode.indexOf(title) != -1) ) {
           e_values+=namedNodes(i).nodeName + '='+thisNode+'<BR>';
         } else {
         e_values = '';
		match = 'N';
         }
       }
   }
   namedNodes = theRoot.getElementsByTagName("ARTIST");
    for ( i = 0; i < namedNodes.length; i++) {
          if ( namedNodes(i).childNodes(0) != null ) {
            thisNode = namedNodes(i).childNodes(0).nodeValue;
            if ( (artist == '') || (thisNode.indexOf(artist) != -1) ) {
              e_values+=namedNodes(i).nodeName + '='+thisNode+'<BR>';
            } else {
            e_values = '';
		match = 'N';

}
          }
   }
    namedNodes = theRoot.getElementsByTagName("COUNTRY");
       for ( i = 0; i < namedNodes.length; i++) {
             if ( namedNodes(i).childNodes(0) != null ) {
               thisNode = namedNodes(i).childNodes(0).nodeValue;
               if ( (country == '') || (thisNode.indexOf(country) != -1) ) {
                 e_values+=namedNodes(i).nodeName + '='+thisNode+'<BR>';
               } else {
               e_values = '';
			match = 'N';

}
             }
   }
    namedNodes = theRoot.getElementsByTagName("COMPANY");
       for ( i = 0; i < namedNodes.length; i++) {
             if ( namedNodes(i).childNodes(0) != null ) {
               thisNode = namedNodes(i).childNodes(0).nodeValue;
               if ( (company == '') || (thisNode.indexOf(company) != -1) ) {
                 e_values+=namedNodes(i).nodeName + '='+thisNode+'<BR>';
               } else {
               e_values = '';
			match = 'N';

}
             }
   }
    namedNodes = theRoot.getElementsByTagName("PRICE");
       for ( i = 0; i < namedNodes.length; i++) {
             if ( namedNodes(i).childNodes(0) != null ) {
               thisNode = namedNodes(i).childNodes(0).nodeValue;
               if ( (price == '') || (thisNode.indexOf(price) != -1) ) {
                 e_values+=namedNodes(i).nodeName + '='+thisNode+'<BR>';
               } else {
               e_values = '';
			match = 'N';

}
             }
   }
    namedNodes = theRoot.getElementsByTagName("YEAR");
       for ( i = 0; i < namedNodes.length; i++) {
             if ( namedNodes(i).childNodes(0) != null ) {
               thisNode = namedNodes(i).childNodes(0).nodeValue;
               if ( (year == '') || (thisNode.indexOf(year) != -1) ) {
                 e_values+=namedNodes(i).nodeName + '='+thisNode+'<BR>';
               } else {
               e_values = '';
			match = 'N';

}
             }
   }
	if (match == 'Y') {
divResults.innerHTML = e_values;
		} else {
divResults.innerHTML = '';
}

}

</SCRIPT>
</head>

<body>
<XML ID="CDCatalog" SRC="CDCatalogue.xml"></XML>
Search the entire tree for nodes that match a search string  <P>

Title:   <INPUT TYPE="TEXT" NAME="title">
 Artist:   <INPUT TYPE="TEXT" NAME="artist">
 Country:   <INPUT TYPE="TEXT" NAME="country">
 Company:   <INPUT TYPE="TEXT" NAME="company">
 Price:   <INPUT TYPE="TEXT" NAME="price">
 Year:   <INPUT TYPE="TEXT" NAME="year">

I m able to read an xml file using javascript, now in the process of refining the filter.
Please let me know,if i m doin anything wrong.

Solomon

document.all is a MAJOR NO NO. That is depreciated IE only code and will fail in any browser other than IE.

Also when you post code, please use code tags so it is readable.

Eric

Hi,

Please see the below XSLT code:

<html>
<head>
<script>
function loadXMLDoc(fname)
{
  var xmlDoc;
  // code for IE
  if (window.ActiveXObject)
  {
    xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  }
  // code for Mozilla, Firefox, Opera, etc.
  else if (document.implementation
  && document.implementation.createDocument)
  {
    xmlDoc=document.implementation.createDocument("","",null);
   }
  else
  {
    alert('Your browser cannot handle this script');
  }
xmlDoc.async=false;
xmlDoc.load(fname);
return(xmlDoc);
}

Title:   <INPUT TYPE="TEXT" NAME="title">
 Artist:   <INPUT TYPE="TEXT" NAME="artist">
 Country:   <INPUT TYPE="TEXT" NAME="country">
 Company:   <INPUT TYPE="TEXT" NAME="company">
 Price:   <INPUT TYPE="TEXT" NAME="price">
 Year:   <INPUT TYPE="TEXT" NAME="year">

Could you let me know, how can i perform a search based on criteria. In other words, I want to filter data dynamically based on form data.
Any Hint would be highly appreciated.

Thanks
Solomon

Hi,

Could any of you point me in the right direction?

Thanks
Solomon

Please read this.

Hi,

Could anyone point me in the right direction?

Solomon