Loop through multidimensional array and then display results

Question

I'm trying to build a form with drop downs that will query a json object with jQuery and then display that product with its data on my html page depending on what was chosen in the drop downs.

Here is my json object:

var obj = {
 "ProductOne":
 {
 "url":["http://www.google.com"],
 "map":["test-one"],
 "options":["test-one","test-three","test-four"],
 "dim":{
 "bam":"5",
 "tin":"4"
 },
 "acc":{
 "bam":"1",
 "tin":"2"
 }
 },
 "ProductTwo":
 {
 "url":["http://www.google-two.com"],
 "map":["test-two"],
 "options":["test-two","test-three","test-five"],
 "dim":{
 "bam":"6",
 "tin":"9"
 },
 "acc":{
 "bam":"8",
 "tin":"6"
 }
 }
 };

Here is my form:

<form name="searchForm" id="searchForm">
 <select name="dim">
 <option value="" selected="">Select One</option>
 <option value="5">5</option>
 <option value="4">4</option>
 <option value="6">6</option>
 <option value="9">9</option>
 </select>
 <select name="acc">
 <option value="" selected="">Select One</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="6">6</option>
 <option value="8">8</option>
 </select>
 <select name="options">
 <option value="" selected="">Select One</option>
 <option value="test-one">Test One</option>
 <option value="test-two">Test Two</option>
 <option value="test-three">Test Three</option>
 <option value="test-four">Test Four</option>
 <option value="test-five">Test Five</option>
 </select>
 <input id="button" type="button" value="submit"/>
 </form>

• elclanrs: What have you tried so far? Can you explain what didn't work in your attempt to solve the problem? Can you post a live demo? Help us help you.
• Edgar Villegas Alvarado: How do you want the results to be shown? in a table? or how?
• user2402492: @elclanrs i tried using jQuery.each to loop through it and then display it on my page.
• user2402492: @Edgar i want the products name and url to be displayed in div tags (ie...<div class="title">ProductOne<br/><a href="url">url</a></div>)
• Edgar Villegas Alvarado: @user I added an answer with all you want :)

Answer 1

You can filter with this:

var filteredProducts = {},
 dim = $("select[name=dim]").val(),
 acc = $("select[name=acc]").val(),
 option = $("select[name=options]").val();
function valueInObject(object, value){
 for(var key in object){
 if(object[key] == value) return true;
 }
 return false; 
}
$.each(obj, function(key, product){
 if(
 (option == "" || $.inArray(option, product.options)) >= 0 && 
 (acc == "" || valueInObject(product.acc, acc)) &&
 (dim == "" || valueInObject(product.dim, dim)) 
 ){
 filteredProducts[key] = product;
 }
});
console.log(filteredProducts);
alert(JSON.stringify(filteredProducts));

Then, you have the filtered products in the filteredProducts object, that has same structure as the original obj object. Then you can traverse it and show it in a table or something.

Assuming you want to show them on a list, let's say you have:

<div id="filteredProducts"></div>

you would do:

$('#filteredProducts').empty(); //Clears previous results
$.each(filteredProducts, function(productKey, product){
 $('<div class="title">'+productKey+'<br/>'+
 '<a href="'+ product.url+'">'+ product.url + '</a>'+
 '</div>').appendTo('#filteredProducts');
}); 

It would add each product to the list.

Cheers, from La Paz, Bolivia

• user2402492: thanks! i tried to apply the filter. I changed the submit button to a button and i added .click(function()) but it doesnt filter at all, it just shows both products all the time?
• user2402492: ok, its working now thank you...but in the options drop down when i choose Test One ProductTwo shows up and when i choose Test Two ProductOne shows up???
• Edgar Villegas Alvarado: Right, does it have to filter by the map property of obj OR by the options array ?
• Edgar Villegas Alvarado: I updated the answer, there was a small error in the $.inArray line. Here the demo jsfiddle.net/edgarinvillegas/V8CTV/2 Note: I'm igonring the map property, I'm filtering by the options array
• Edgar Villegas Alvarado: btw if you wanted to filter with the map property instead of options, just change $.inArray(option, product.options)) by $.inArray(option, product.map)) Cheers