How can I filter json data using checbox input and show or hide products that match criteria
I have some data stored in an array. When I click on the checkbox, I would like to show the element that matches the criteria and hide the ones that don't.
For example, if I have a list of products that are displayed through for loop
, and when I check the box for Android, I would like to show only Android phones.
Here is my javascript code:
var data = {
"products": [{
"Name": "Apple iPhone6 16GB",
"OS": "iOS",
"Camera": "16mp",
"Price": "$" + 99.99,
"Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
}, {
"Name": "Samsung- Galaxy S6 32GB",
"OS": "android",
"Camera": "16mp",
"Price": "$" + 199.99,
"Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
}, {
"Name": "HTC One M9 32GB",
"OS": "android",
"Camera": "16mp",
"Price": "$" + 199.99,
"Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
}, {
"Name": "Apple iPhone6 Plus 32GB",
"OS": "iOS",
"Camera": "16mp",
"Price": "$" + 399.99,
"Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
}, {
"Name": "Samsung Galaxy Note 5 32GB",
"OS": "android",
"Camera": "16mp",
"Price": "$" + 499.99,
"Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
}, {
"Name": "LG G Flex 2 32GB",
"OS": "android",
"Camera": "16mp",
"Price": "$" + 199.99,
"Specs": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel finibus ligula. Duis pretium, velit eget venenatis laoreet, eros nulla facilisis eros, quis consectetur nisl sapien ut justo. Nulla et erat ex. Morbi tincidunt vitae tellus eget iaculis. Sed imperdiet, justo et ultricies imperdiet, leo ante elementum nunc, et facilisis mauris felis id felis. Etiam sit amet dolor purus. Vestibulum et hendrerit neque, sit amet gravida dolor."
}]
}
for (var i = 0; i < data.products.length; i++) {
$('#productList').append(
'<div class="item">' +
'<h3>' + data.products[i].Name + '</h3>' +
'<h4>' + data.products[i].OS + '</h4>' +
'<h5>' + data.products[i].Camera + '</h5>' +
'<h5>' + data.products[i].Price + '</h5>' +
'<p>' + data.products[i].Specs
);
}
And here is the HTML code:
<div id="container">
<ul id="mainNav">
<li>
Device Manufacturer
<ul>
<li><input type="checkbox" name= "device" value="Apple"> Apple</li>
<li><input type="checkbox" name= "device" value="HTC"> HTC</li>
<li><input type="checkbox" name= "device" value="LG"> LG</li>
<li><input type="checkbox" name= "device" value="Samsung"> Samsung</li>
</ul>
</li>
<li>
Operating System
<ul>
<li><input type="checkbox" name= "device" value="Android"> Android</li>
<li><input type="checkbox" name= "device" value="ios"> iOS</li>
</ul>
</li>
<li>
Camera
<ul>
<li><input type="checkbox" name= "device" value="8mp"> 8mp</li>
<li><input type="checkbox" name= "device" value="16mp"> 16mp</li>
</ul>
</li>
<li>
Storage
<ul>
<li><input type="checkbox" name= "device" value="Apple"> 16GB</li>
<li><input type="checkbox" name= "device" value="Apple"> 32GB</li>
<li><input type="checkbox" name= "device" value="Apple"> 64GB</li>
</ul>
</li>
</ul>
<div id="productList"></div>
</div>
+3
source to share
1 answer
Here's one easy way to do it (there are probably much better solutions, but this should work):
http://jsfiddle.net/txrk87ug/17/
Created product listing building as a function. It first clears the list of products, then selects the checkboxes with a set of devices, and then builds the list of products using the array as a filter to select suitable products:
$.fn.buildProductList = function(){
$('#productList').html("");
var devices = [];
$('input[name="device"]:checked').each(function() {
devices.push(this.value);
});
for(var i =0; i < data.products.length; i++) {
if($.inArray(data.products[i].Device, devices) > -1)
{
$('#productList').append(data.products[i].Name + '' + '<br />' + data.products[i].OS + '' + '<br />' + data.products[i].Camera + '' + '<br />' + data.products[i].Price + '' + '<br />' + data.products[i].Specs + '<br /> <br />');
}
}
}
Created a trigger to run the build product list function when the checkboxes are changed:
$(":checkbox").change(function() {
$.fn.buildProductList();
});
Your products will need properties that match the values of the checkboxes you select. For demonstration, I've only included the Device property. You should be able to select any number of device manufacturers and only display products that match those selections. You can create your arrays for other groups of checkboxes in the same way and add them to the if statement when deciding to add a product to the list.
Hope this is a good start for you.
0
source to share