Filtering JSON as passed to/from LocalStorage
Filtering JSON as passed to/from LocalStorage - Andrew Pougher
HTML
<div id="DrpDwn">
Travel Date:<select id="DropDown_TravelDate"><option>Travel Date</option></select>
Full Name:<select id="DropDown_FullName"><option>None</option></select>
</div>
<br />
<br />
Filtered travel information
<table id="details" border="1" cellpadding="2" cellspacing="2">
<thead>
<tr>
<th >
Travel Date
</th>
<th>
Fullname
</th>
<th>
PNR
</th>
</tr>
</thead>
<tbody></tbody>
</table>
CSS
th,td
{
width:100px;
}#iframe1{
border:none;
width:100%;
height:84px;
}
JavaScript
var ProductInfo = [{
TravelDate: "2011",
FullName: "John",
PNR: "101",
Selected:"False"
},
{
TravelDate: "2011",
FullName: "Sam Clarke",
PNR: "x101",
Selected:"False"
},
{
TravelDate: "2010",
FullName: "John SMith",
PNR: "234",
Selected:"False"
},
{
TravelDate: "2011",
FullName: "Jane Bride",
PNR: "100",
Selected:"False"
},
{
TravelDate: "2012",
FullName: "A Nother",
PNR: "500",
Selected:"False"
},
{
TravelDate: "2011",
FullName: "Drew Moore",
PNR: "100",
Selected:"False"
},
{
TravelDate: "2013",
FullName: "Drew Moore",
PNR: "100",
Selected:"False"
},
{
TravelDate: "2013",
FullName: "Jenny",
PNR: "455",
Selected:"True"
}];
// set to local
localStorage.setItem("demojson", JSON.stringify(ProductInfo));
var fdjson = JSON.parse(localStorage.getItem("demojson"));
var TravelDatesArray = [];
var FullNamesArray = [];
// adding unique TravelDates to TravelDatesArray
$.each(fdjson, function (index) {
var TravelDate = fdjson[index].TravelDate;
if ($.inArray(TravelDate, TravelDatesArray) == -1) {
TravelDatesArray.push(TravelDate);
}
});
//sorting the TravelDate
TravelDatesArray.sort();
var $TravelDateDropDown = $("#DropDown_TravelDate");
var $FullNameDropDown = $("#DropDown_FullName");
var $container = $("#details").find("tbody");
// append the TravelDates to select
$.each(TravelDatesArray, function (i) {
$TravelDateDropDown.append('<option value="' + TravelDatesArray[i] + '">' + TravelDatesArray[i] + '</option>');
});
$TravelDateDropDown.change(function () {
var selecedTravelDate = this.value;
//filter based on selected TravelDate.
FullNamesArray = jQuery.grep(fdjson, function (product, i) {
return product.TravelDate == selecedTravelDate;
});
$FullNameDropDown.empty();
$FullNameDropDown.append('<option>None</option>');
for (var i = 0; i < FullNamesArray.length; i++) {
...