www.webdeveloper.com
Results 1 to 3 of 3

Thread: Simple filtering of XML records using Javascript

  1. #1
    Join Date
    Feb 2009
    Posts
    6

    Simple filtering of XML records using Javascript

    Hi everyone.

    Ive successfully loaded XML data in a HTML page using Javasrcipt only (sourced from Mark Wilton-Jones's howtocreate.co.uk tutorial).

    Here's the XML:
    Code:
    <Feat_Artist>
    	<Artist id="1">
    		<Genre>Rock</Genre>
    		<Photo>Band_1.jpg</Photo>
    		<Name>Band 1</Name>
    		<Descrip>Band 1 descrip</Descrip>
    	</Artist>
    	<Artist id="2">
    		<Genre>Folk</Genre>
    		<Photo>Band_2.jpg</Photo>
    		<Name>Band 2</Name>
    		<Descrip>Band 2 descrip</Descrip>
    	</Artist>
    	<Artist id="3">
    		<Genre>Country</Genre>
    		<Photo>Band_3.jpg</Photo>
    		<Name>Band 3</Name>
    		<Descrip>Band 3 descrip</Descrip>
    	</Artist>
    </Feat_Artist>
    Here's the script:
    Code:
    <script language="JavaScript">
    
          function printArtists(xmlDoc) {
    	
            var x = xmlDoc.getElementsByTagName("Artist"); 
            var writtenString = '';
            var placetooutput = document.getElementById('writeroot');
    
            for(var i=0; i < x.length; i++) {
              writtenString += '<table width="100%" border="0">';
    		  writtenString += '<tr>';  
    		  writtenString += '<td colspan="2">' + x[i].getElementsByTagName("Genre")[0].childNodes[0].nodeValue + '<hr>' + '</td>';
    		  writtenString += '</tr>'
    		  writtenString += '<tr>'; 
    		  writtenString += '<td width="20%" rowspan="2">' + '<img src="' + x[i].getElementsByTagName("Photo")[0].childNodes[0].nodeValue + '" width="160">' + '</td>';
              writtenString += '<td width="80%">' + x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue + '</td>';
              writtenString += '</tr>';
    		  writtenString += '<tr>'; 
    		  writtenString += '<td>' + x[i].getElementsByTagName("Descrip")[0].childNodes[0].nodeValue + '</td>';
    		  writtenString += '</tr>';
    		  writtenString += '</table>';
            }
    
            
            placetooutput.innerHTML = writtenString;
          }
        </script>
    Ok so my question.....
    I'd like to filter the records to show specific child (<Artist>) elements.
    Say i wanted to only display <Artist id="1"> in the table. What scripting would i need to add/modify to do this?

    Much thanks for any help!

  2. #2
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    Code:
    <script language="JavaScript">
    
          function printArtists(xmlDoc) {
    	
            var x = xmlDoc.getElementsByTagName("Artist"); 
            var writtenString = '';
            var placetooutput = document.getElementById('writeroot');
    
            for(var i=0; i < x.length; i++) {
                    if (x[i].id == "1") { 
    		  writtenString += '<table width="100&#37;" border="0">';
    		  writtenString += '<tr>';  
    		  writtenString += '<td colspan="2">' + x[i].getElementsByTagName("Genre")[0].childNodes[0].nodeValue + '<hr>' + '</td>';
    		  writtenString += '</tr>'
    		  writtenString += '<tr>'; 
    		  writtenString += '<td width="20%" rowspan="2">' + '<img src="' + x[i].getElementsByTagName("Photo")[0].childNodes[0].nodeValue + '" width="160">' + '</td>';
    		  writtenString += '<td width="80%">' + x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue + '</td>';
    		  writtenString += '</tr>';
    		  writtenString += '<tr>'; 
    		  writtenString += '<td>' + x[i].getElementsByTagName("Descrip")[0].childNodes[0].nodeValue + '</td>';
    		  writtenString += '</tr>';
    		  writtenString += '</table>';
                    }
            }
    
            
            placetooutput.innerHTML = writtenString;
          }
        </script>
    P.S. childNodes don't exist in an empty XML tag so checking for a nodeValue on a empty tag will make your code error out.

    I usually just write a function to retreive the value and do some validation inside of it.

    Code:
    //////////////////////////////////////////////////////////////////////////////
    // getXMLvalue
    //
    //	Given an XML node and an XML tag name - return the nodeValue of the tag
    //
    //////////////////////////////////////////////////////////////////////////////
    function getXMLvalue (node,tagname) {
    	var tagValue = "";
    
    	// If tag exists
    	if (node.getElementsByTagName(tagname)[0]) {
    
    		// If tag is not empty get the value
    		if (node.getElementsByTagName(tagname)[0].firstChild) {
    			tagValue = node.getElementsByTagName(tagname)[0].firstChild.nodeValue;
    		} 
    	}
     	return tagValue;
    }
    Last edited by slaughters; 03-13-2009 at 12:52 AM.

  3. #3
    Join Date
    Feb 2009
    Posts
    6
    Thanks for the response slaughters.
    Your code doesn't quite work as is though, but i figured it out using your input:

    Code:
    function printArtists(xmlDoc) {
    	
            var x = xmlDoc.getElementsByTagName("Artist"); 
            var writtenString = '';
            var placetooutput = document.getElementById('writeroot');
    		/*var id = x[0].getAttribute("id");*/
           
    	   
    	   for(var i=0; i < x.length; i++) {
                     if (x[i].getAttribute("id") == "1") { 
    		  writtenString += '<table width="100%" border="0">';
    		  writtenString += '<tr>';  
    		  writtenString += '<td colspan="2">' + x[i].getElementsByTagName("Genre")[0].childNodes[0].nodeValue + '<hr>' + '</td>';
    		  writtenString += '</tr>';
    		  writtenString += '<tr>'; 
    		  writtenString += '<td width="20%" rowspan="2">' + '<img src="' + x[i].getElementsByTagName("Photo")[0].childNodes[0].nodeValue + '" width="160">' + '</td>';
    		  writtenString += '<td width="80%">' + x[i].getElementsByTagName("Name")[0].childNodes[0].nodeValue + '</td>';
    		  writtenString += '</tr>';
    		  writtenString += '<tr>'; 
    		  writtenString += '<td>' + x[i].getElementsByTagName("Descrip")[0].childNodes[0].nodeValue + '</td>';
    		  writtenString += '</tr>';
    		  writtenString += '</table>';
                    
            		}
            }
            
            placetooutput.innerHTML = writtenString;
          }
    Works a charm - thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles