Simple filtering of XML records using Javascript

[kachina_music]

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:

<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:

<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!

[slaughters]

<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.

//////////////////////////////////////////////////////////////////////////////
// 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;
}

[kachina_music]

Thanks for the response slaughters.
Your code doesn't quite work as is though, but i figured it out using your input:

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!