CODEWITHSUNDEEP
javascriptjqueryhtml
Anshu
Anshu

Reputation: 616

Filter the json data and display data in a grid

Here is the json. Im displaying year and make in a select box. When i select an year and make its related data should filter and display in a grid.For eg when i select 2010 and def the related data i.e,2010. def, 300 & 5000 should be displayed in the grid. Can any one help me to do this with out using any jquery plugins.

var data = [
    { Year: "2011", Make: "abc", Model: "100", SubModel: "5000", },
    { Year: "2011", Make: "abc", Model: "200", SubModel: "6000",  },
    { Year: "2010", Make: "def", Model: "300", SubModel: "5000",  },
    { Year: "2011", Make: "def", Model: "100", SubModel: "1000",  }
];

Here is my code: http://jsfiddle.net/qK2A3/2/

Upvotes: 4

Views: 2598

Answers (3)

Anshu
Anshu

Reputation: 616

Ans to my ques

function getRelated() {
        $.each(g_Vehicle, function (index) {
            var sMake = g_Vehicle[index].Make;
            if (g_Vehicle[index].Make == $('#DropDown_Make').val() && g_Vehicle[index].Year == $('#DropDown_Year').val()) {
                $(".ModelClass").html(g_Vehicle[index].Model);
                $(".SubModelClass").html(g_Vehicle[index].SubModel);
            }
        });
    };

DEMO: http://jsfiddle.net/ybT7a/ It's working.

Upvotes: 1

charlietfl
charlietfl

Reputation: 171679

You need to loop over the array of objects, find the object with matching year and use that object to parse some html. Can do this in different ways, I am using an array utility method $.grep to do the looping of the array. Note that demo had to remove trailing commas from your objects in data array posted. IE hates trailing commas and will break.

var year = /*your code to retrieve year*/  2010;/* test value*/
var make= /*your code to retrieve year*/ 'def';/* test value*/

var obj=$.grep( data, function(item, idx){
    return item.Year == year && item.Make == make;
})[0];

/* create some html from the object that matches year and make*/

$('body').append('<p>Model: '+ obj.Model +', SubModel: '+obj.SubModel+'</p>');

DEMO: http://jsfiddle.net/uPEQ7/

API Reference for $.grep http://api.jquery.com/jQuery.grep/

Upvotes: 0

rajesh kakawat
rajesh kakawat

Reputation: 10896

you can try in this way.

HTML Code :

<select class="target">
  <option value="2010" >2010</option>
  <option value="2011">2011</option>
</select>

JAVASCRIPT CODE :

$('.target').change(function() {
  var selected_value = $(this).val();
  jQuery.each(data[0] ,function(key,val){
     if(val.Year == selected_value){
         //code to add to grid go here
     }
  })
});

Upvotes: 0

Related Questions