Jump to content

Filtering Xml With Javascript


johnnyg24
 Share

Recommended Posts

I am having trouble with filtering my xml data based on a user input. I would like a function that gathers xml data in a similar fashion that the <xml:if test> works in XSLT. I need the user to input what they want to see and then have the page load. The user input comes from a dropdown list called "bookNumChooser" and would run a function called "bookChooser". After the selection only the <sku> from my xml with that corresponding <book> number would be returned. Any help on how to create that function would be great! Thanks.xml:

<?xml version="1.0" encoding="iso-8859-1"?><skus>	<sku>	<idNum>JOLI-1</idNum>	<desc>Joplin 1 Orange</desc> 	<construction>116</construction> 	<constructionTXT>Chenille</constructionTXT>	<pStyle>103</pStyle>	<pStyleTXT>Tarditional Stripe</pStyleTXT>	<pClass>1</pClass>	<pClassTXT>Upholstery</pClassTXT>	<confCode>Exclusive</confCode>	<country>USA</country>	<rr>yes</rr>	<pWidth>54"</pWidth>	<vRepeat>0"</vRepeat>	<hRepeat>6.375"</hRepeat>	<fiber>54% Spun Viscose, 36% Cotton, 10% Polyester</fiber>	<finish>Teflon</finish>	<pTest>W15</pTest>	<cleanCode>DCO</cleanCode>	<wPrice>$20.95</wPrice>	<rPrice>$42.00</rPrice>	<pColorCode>300</pColorCode>	<pColorCodeTXT>Marine</pColorCodeTXT>	<book>1032</book>	<bookTXT>Art of Color - Aqua</bookTXT>	</sku>	<sku>	<idNum>JOPL-2</idNum>	<desc>Joplin 2 Pink</desc> 	<construction>116</construction> 	<constructionTXT>Chenille</constructionTXT>	<pStyle>103</pStyle>	<pStyleTXT>Tarditional Stripe</pStyleTXT>	<pClass>1</pClass>	<pClassTXT>Upholstery</pClassTXT>	<confCode>Exclusive</confCode>	<country>USA</country>	<rr>yes</rr>	<pWidth>54"</pWidth>	<vRepeat>0"</vRepeat>	<hRepeat>6.375"</hRepeat>	<fiber>54% Spun Viscose, 36% Cotton, 10% Polyester</fiber>	<finish>Teflon</finish>	<pTest>W15</pTest>	<cleanCode>DCO</cleanCode>	<wPrice>$20.95</wPrice>	<rPrice>$42.00</rPrice>	<pColorCode>100</pColorCode>	<pColorCodeTXT>Pink</pColorCodeTXT>	<book>1033</book>	<bookTXT>Art of Color - Red</bookTXT>	</sku></skus>

HTML & java script:

<script type="text/javascript"> 	  // retrieve XML document as document object	  	  function loadXMLDoc(url) {		 var req = null;		 try {			req = new XMLHttpRequest();			req.overrideMimeType("text/xml");		 } catch(e) {			req = new ActiveXObject("Msxml2.XMLHTTP");		 }		 if (req) {		 	var xDoc = null;			req.open("GET", "http://www.estout.com/ordering/skuInfo.xml", true);			req.onreadystatechange = function() {			   if (req.readyState == 4) {				  if (req.status == 200) {					 xDoc = req.responseXML;					 if (xDoc && typeof xDoc.childNodes != "undefined" && xDoc.childNodes.length == 0) {						xDoc = null;					 } else {						for (var i = 0; i < xDoc.getElementsByTagName("sku").length; i++) {						   db[db.length] = getOneSku(xDoc, i);						}						selectSort(document.getElementById("sortChooser"));					 }				  } else {					 alert("There was a problem retrieving the XML data:\n" + req.statusText);				  }			   }			}			req.send(null);		 }	  }	  	  // Create JavaScript object that simulates XML structure,	  // plus some data transforms that will facilitate sorting	  var db = new Array();	  	  function getOneSku(xDoc, i) {		 var oneRecord = new Object();		 var oneElem = xDoc.getElementsByTagName("sku")[i];		 oneRecord.idNum = oneElem.getElementsByTagName("idNum")[0].firstChild.data;		 oneRecord.desc = oneElem.getElementsByTagName("desc")[0].firstChild.data;		 oneRecord.construction = oneElem.getElementsByTagName("construction")[0].firstChild.data;		 oneRecord.constructionTXT = oneElem.getElementsByTagName("constructionTXT")[0].firstChild.data;		 oneRecord.pStyle = oneElem.getElementsByTagName("pStyle")[0].firstChild.data;		 oneRecord.pStyleTXT = oneElem.getElementsByTagName("pStyleTXT")[0].firstChild.data;		 oneRecord.pClass = oneElem.getElementsByTagName("pClass")[0].firstChild.data;		 oneRecord.pClassTXT = oneElem.getElementsByTagName("pClassTXT")[0].firstChild.data;		 oneRecord.confCode = oneElem.getElementsByTagName("confCode")[0].firstChild.data;		 //oneRecord.confCodeTXT = oneElem.getElementsByTagName("confCodeTXT")[0].firstChild.data;		 oneRecord.pColorCode = oneElem.getElementsByTagName("pColorCode")[0].firstChild.data;		 oneRecord.pColorCodeTXT = oneElem.getElementsByTagName("pColorCodeTXT")[0].firstChild.data;		 oneRecord.book = oneElem.getElementsByTagName("book")[0].firstChild.data;		 oneRecord.bookTXT = oneElem.getElementsByTagName("bookTXT")[0].firstChild.data;		 return oneRecord;		 }		 		 	  function drawTextTable() {		 var newRow;				 deleteRows(document.getElementById("mainTableBody"));		 for (var i = 0; i < db.length; i++) {			newRow = document.getElementById("mainTableBody").insertRow(i);			appendCell(newRow, "Item", db[i].idNum);			appendCell(newRow, "Desc", db[i].desc);			appendCell(newRow, "Construction", db[i].constructionTXT);			appendCell(newRow, "Style", db[i].pStyleTXT);			appendCell(newRow, "Class", db[i].pClassTXT);			appendCell(newRow, "Confinement", db[i].confCodeTXT);			appendCell(newRow, "Book", db[i].bookTXT);			appendCell(newRow, "Book Number", db[i].book);			appendCell(newRow, "Color Number", db[i].pColorCode);			appendCell(newRow, "Color", db[i].pColorCodeTXT);		 }		 	  }	  	  function appendCell(Trow, Cclass, txt) {		 var newCell = Trow.insertCell(Trow.cells.length);		 newCell.className = Cclass;		 newCell.innerHTML = txt;	  }	  function deleteRows(tbl) {		 while (tbl.rows.length > 0) {			tbl.deleteRow(0);		 }	  }	  	  // Sorting routines	  function selectSort(chooser) {		 switch (chooser.value) {		 case "byBook" :			db.sort(sortDBByBook);			break;		 case "byColor" :			db.sort(sortDBBypColorCode);			break;		 case "byDesc" :			db.sort(sortDBByDesc);			break;	   }		 drawTextTable();	  }	  function sortDBByBook(a, b) {		 if (document.getElementById("orderChooser").value == "inc") {			return (a.book < b.book) ? -1 : 1;		 } else {			return (a.book > b.book) ? -1 : 1;		 }	  }	  function sortDBBypColorCode(a, b) {		 if (document.getElementById("orderChooser").value == "inc") {			return (a.pColorCode < b.pColorCode) ? -1 : 1;		 } else {			return (a.pColorCode > b.pColorCode) ? -1 : 1;		 }	  }	  function sortDBByDesc(a, b) {		 if (document.getElementById("orderChooser").value == "inc") {			return (a.desc - b.desc) ? -1 : 1;		 } else {			return (b.desc - a.desc) ? -1 : 1;		 }	  }		  function selectOrder() {		 selectSort(document.getElementById("sortChooser"));	  }	  // Initialization called by onload	  function init() {		 loadXMLDoc("http://www.estout.com/ordering/skuInfo.xml");	  }	  window.onload = init;	  </script>    </head> <body> 	  <h1>Search Test</h1> 	  <hr />    <p>Sort by: 	 <select name="select" id="sortChooser" onchange="selectSort(this)">	   <option value="byBook">Book</option>	   <option value="byDesc">Description</option>	   <option value="">---------------------</option>	   <option value="byColor">Color</option>	   	 </select> 	    Ordered: 		<select id="orderChooser"		 onchange="selectOrder()"> 		 <option value="inc">Low to High</option> 		 <option value="dec">High to Low</option> </select>    Book Number:		<select id="bookNumChooser"		 onchange="bookChooser()"> 		 <option value="1033">1033</option> 		 <option value="1032">1032</option> </select>		</p>  	  <xml id="reports"> 	  </xml> 	  	  <table id="mainTable" border="1" cellpadding="4"> 		 <tr class="mainTableHead"> 		   <th>Id Number</th>		   <th>Descritption</th>		   <th>Construction</th>		   <th>Style</th>		   <th>Class</th>		   <th>Confinment Code</th>		   <th>Book Name</th>		   <th>Book Number</th>		   <th>Color Number</th>		   <th>Color Name</th>		 </tr> 		  		 <tbody id="mainTableBody"> 		 </tbody> 	  </table> </body>

Link to comment
Share on other sites

There's a lot of code there, but one thing I notice is this - You pass the "sku" node to your "getOneSku" function here:

for (var i = 0; i < xDoc.getElementsByTagName("sku").length; i++) {   db[db.length] = getOneSku(xDoc, i);}

Then, in that function, you proceed to look for a "sku" node in the node that you passed:

function getOneSku(xDoc, i) {	var oneRecord = new Object();	var oneElem = xDoc.getElementsByTagName("sku")[i];	oneRecord.idNum = oneElem.getElementsByTagName("idNum")[0].firstChild.data;	// and so on...}

I'm pretty sure that would only work if your XML looked like this:

<skus>	<sku>		<sku></sku>	</sku></skus>

You might try modifying your "getOneSku" function like so:

function getOneSku(skuNode, i) {	var oneRecord = new Object();	oneRecord.idNum = skuNode.getElementsByTagName("idNum")[0].firstChild.data;	// and so on...}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...