Jump to content

Search for multiple elements in XML with Javascript

Matt_CreativeAudio

By Matt_CreativeAudio
in JavaScript

 Share

Recommended Posts

Matt_CreativeAudio Newbie

Matt_CreativeAudio

Posted
Posted

I've been making tons of progress on my vehicle fit guide. I've made a drop down box dynamically populate based on previous selections, and now I need those selections to search the xml file and return my results. My old code only searched by the vehicle year, and that returned all vehicles with the same year. I'm trying to parse my XML using multiple variables, and now can't get any results to return. how am I able to search for models, then search for years within the model? here are my code snippets below, which currently only search the whole XML file for similar years:

<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="xmlcss.css"><script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script><script type="text/javascript">jQuery(document).ready(function($){	var $xml;	var make = $('#make');	var model = $('#model');	var year = $('#year');	var front1 = $('#Front_Location_1');	var frontsize1 = $('#Front_Size_1');	$.get('fitguide3.xml', function(data){		$xml = $(data);		var rows = $(data).find('ROWSET ROW');		var makes = [];				$.each(rows, function(index, element){			var _make = $(element).find('MAKE').text();			makes.push('<option value="' + _make + '">' + _make + '</option>');		});				makes = $.unique(makes);		make.append(makes.join('n'));			}, 'xml');	$('#make').on('change', function(){		var _value1 = $(this).val();		var _models = $xml.find('ROWSET ROW:contains("'+_value1+'")');		var models = [];				console.log(_models);				$.each(_models, function(index, element){						var _model = $(element).find('Model').text();			models.push('<option value="' + _model + '">' + _model + '</option>');		});		models = $.unique(models);		model.find('option').remove();		model.append(models.join('n'));			});	$('#model').on('change', function(){		var _value2 = $(this).val();		var _years = $xml.find('ROWSET ROW:contains("'+_value2+'")');		var years = [];				console.log(_years);				$.each(_years, function(index, element){						var _year = $(element).find('YEAR').text();			years.push('<option value="' + _year + '">' + _year + '</option>');		});		years = $.unique(years);		year.find('option').remove();		year.append(years.join('n'));			});	//  $('#make').val()	//  $('#model').val()	//  $('#year').val()	$('#year').on('click', function(){  		var _value3 = $(this).val();		var finalmodel = $('#model').val();		var _front1 = $xml.find('ROWSET ROW:contains("'+_value3+'")');		console.log(_front1);		<!-- $("#Front_Location_1").html(""); -->		$.each(_front1, function(index, element){						var _front = $('#frontspeakers').val();			var front = [];  			front.push('<p>' + element + '</p>');			front = $.unique(front);			front1.append(element);		});	})});</script></head><body><p id="test"></p><select id="make"><option value='0'>---Select Make---</option></select><select id="model" name="model"></select><select id="year"></select><table style="width:100%"><tr><td>Front Location 1</td></tr><tr><td id="frontspeakers"></td></tr><tr><td id="Front_Location_1"></td></tr></table>

And this is how my XML file is set up:

<?xml version="1.0"?><ROWSET><ROW><MAKE>ACURA</MAKE><Model>CL</Model><YEAR>2001-2003</YEAR><Front_Location_1>Door</Front_Location_1><Front_Size_1>6 1/2</Front_Size_1><Front_Location_2>Sail Panel</Front_Location_2><Front_Size_2>1    </Front_Size_2><Rear_Location_1>Deck</Rear_Location_1><Rear_Size_1>6 x 9</Rear_Size_1><Rear_Location_2></Rear_Location_2><Rear_Size_2></Rear_Size_2><Other_Speakers></Other_Speakers></ROW><ROW><MAKE>ACURA</MAKE><Model>CL</Model><YEAR>1999-1999</YEAR><Front_Location_1>Door</Front_Location_1><Front_Size_1>6 1/2</Front_Size_1><Front_Location_2>Sail Panel</Front_Location_2><Front_Size_2>1    </Front_Size_2><Rear_Location_1>Deck</Rear_Location_1><Rear_Size_1>6 x 9</Rear_Size_1><Rear_Location_2></Rear_Location_2><Rear_Size_2></Rear_Size_2><Other_Speakers></Other_Speakers></ROW>

This searches for them, but returns every model with the same years. Work-in-progress version located HERE

 

Any help would be great!

Link to comment
Share on other sites
Matt_CreativeAudio Newbie

Matt_CreativeAudio

Posted
  • Author
Posted

I've been working on this for ages, but in the time since I posted this I actually finally figured it out! using .filter and .find! I am so excited, I've never done any scripting before and this is my first. I change the second to last function to:

	$('#year').on('click', function(){  		var _value3 = $(this).val();		var finalmodel = $('#model').val();		var finalfilter = $xml.find('ROWSET ROW:contains("'+finalmodel+'")');		var _front1 = finalfilter.filter('ROWSET ROW:contains("'+_value3+'")');		console.log(_front1);		$.each(_front1, function(index, element){						var _front = $('#frontspeakers').val();			var front = [];  			front.push('<p>' + element + '</p>');			front = $.unique(front);			front1.html(element);		});	})});
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
Go to topic listing
×
×
  • Create New...