Filter the json data and display data in a grid

Question

0.00/5 (No votes)

See more:

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.

JavaScript

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/[^]

Posted 11-Nov-12 23:19pm

Anshu BM

Updated 13-Nov-12 19:27pm

v3

Add a Solution

3 solutions

Solution 1

try this one bro. :-)

html code here...

HTML

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><div>
  
<select id="mysel">
  <option value="2010">2010<option />
 <option value="2009">2009<option />
 <option value="2008">2008<option />
 <option value="2007">2007<option />
</option></option></option></option></select>
<table id="mytable">
  <tr>
    <th>Year</th>
    <th>Make</th>
    <th>Model</th>
    <th>SubModel</th>
  </tr>
<tr>
    <td><input type="text" id="year" value="year" /></td>
    <td>
    <td>
    <table><tbody><tr><td>
</td></tr></tbody></table></td></td></tr>
</table>
</div>

jquery code here..

JavaScript

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",  }
];
$(function(){
  $("#mysel").change(function(){
  var len=0;
    for(len = 0; len <data.length len="" mode="hold" />      if(data[len].Year==$(this).val()){
      alert(">>"+data[len].Make+"<< >>"+data[len].Model+"<< >>"+data[len].SubModel);
      $("#year").val(data[len].Year);
      $("#make").val(data[len].Make);
      $("#model").val(data[len].Model);
      $("#submod").val(data[len].SubModel);
      }
    }
  });

});

you can try it here.. :-)

http://jsbin.com/esosuw/1/

Posted 13-Nov-12 4:31am

deepak.m.shrma

Solution 2

Dear Bro you have done lots of mistake. First download firebug and debug your code..
Here i have done modification in your code you can check this out. hope you will find your own mistake. otherwise i ll make it clear.

most important while accessing any database there must a unique key. it doesnt matter you use external DB or. json object. hope you will get what i m trying to say.

http://jsfiddle.net/qK2A3/4/

Posted 14-Nov-12 0:36am

deepak.m.shrma

Comments

Anshu BM 14-Nov-12 7:38am

I didn't want "Model" as drop box. when im executing the code there is no errors. I also using firebug to correct my mistakes. Do u get my problem??? When i select the values in the drop down remaining data should be displayed. For this first we have to filter the json array and next we have to display it in the table.
For Eg: When I select '2011' and 'abc' in drop box the remaining data what I mean is Model:"100" subModel:"5000" should be automatically displayed in the table.

Anshu BM 14-Nov-12 7:50am

Any way Thanks for your support. Till now i didnt get the answer. Can you please help me. :-)

deepak.m.shrma 15-Nov-12 22:09pm

brother. that is what i said. you have to make a primary key for selecting values,
suppose yor database is something like this
2011 abc 100 5000
2011 abc 200 6000
2010 def 300 5000
2011 def 100 1000

if you select 2011as year, abc as make, you will get 2 row,
ist and second row. how could you show 2 row in single field palce. you have to handle that scenario. so that you can handle those situation.

Anshu BM 16-Nov-12 2:07am

Im not using any database to access values

deepak.m.shrma 16-Nov-12 2:17am

bro. ur using json as database here. dont you get it..

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Anshu BM · Accepted Answer · 2012-11-14T20:31:00

C#

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.

Filter the json data and display data in a grid

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Filter the json data and display data in a grid

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us