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>

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