Filter JSON object with Array of selected checkbox

Question

How i can filter my JSON object with array.

This is an sample of my json object and code, i want to filter final render HTML by selected checkbox.

Thanks for your help

function init(arr){
  var li = '';
  $.each(jsn, function (key, value) {

    if (arr.length == 0) {
      li += '<li>' + jsn[key].name + '</li>';
    }else{
      $(arr).each(function (i, v) {
      // this section must be filter "pack's" but i can't writ correct query
        li += '<li>' + jsn[key].name + '</li>';
      });
    };
    $('#container').html(li);
  })
}
var CheckArr = new Array();
init(CheckArr);

$('#btnFilter').click(function(){
    var CheckArr = new Array();
  $('input[type=checkbox]').each(function () {
    if ($(this).is(':checked')) {
      CheckArr.push($(this).attr('value'))
    }
  });
  init(CheckArr);

can you elaborate what do you actually want?

Akshay
– Akshay

2016-12-06 07:28:10 +00:00
Commented Dec 6, 2016 at 7:28 — Akshay
– Akshay, Commented Dec 6, 2016 at 7:28

Mihai Alexandru-Ionut · Accepted Answer · 2016-12-06 07:49:09Z

First of all, you have to verify length of array outside of init function. (for case when function is called for first time).Then, you need to iterate your checkboxes array and search every item in your json array(called jsn) to verify condition you need.

Here is solution:

$(document).ready(function(){
var jsn = [  
   {  
      "name":"pack01",
      "caplessthan100mb":"False",
      "cap100to500mb":"True",
      "cap500mbto2g":"False",
      "cap2gto10g":"False"
   },
   {  
      "name":"pack02",
      "caplessthan100mb":"True",
      "cap100to500mb":"False",
      "cap500mbto2g":"False",
      "cap2gto10g":"False"
   },
   {  
      "name":"pack03",
      "caplessthan100mb":"False",
      "cap100to500mb":"False",
      "cap500mbto2g":"False",
      "cap2gto10g":"True"
   },
   {  
      "name":"pack04",
      "caplessthan100mb":"False",
      "cap100to500mb":"False",
      "cap500mbto2g":"True",
      "cap2gto10g":"False"
   },
   {  
      "name":"pack05",
      "caplessthan100mb":"False",
      "cap100to500mb":"False",
      "cap500mbto2g":"False",
      "cap2gto10g":"True"
   },
   {  
      "name":"pack06",
      "caplessthan100mb":"True",
      "cap100to500mb":"False",
      "cap500mbto2g":"False",
      "cap2gto10g":"False"
   },
   {  
      "name":"pack07",
      "caplessthan100mb":"False",
      "cap100to500mb":"False",
      "cap500mbto2g":"False",
      "cap2gto10g":"True"
   }
];

function init(arr){
   var li = '';
   if(arr.length==0)
   {
       $.each(jsn, function (key, value) {
          li+= '<li>' + jsn[key].name + '</li>';
       });
   }
   else{
       $(arr).each(function (i, v) {
           $.each(jsn, function (key, value) {
              if(jsn[key][v]=="True")
                 li+= '<li>' + jsn[key].name + '</li>';
           });
       });
   }
   $('#container').html(li);
}
var CheckArr = new Array();
init(CheckArr);

$('#btnFilter').click(function(){
	var CheckArr = new Array();
  $('input[type=checkbox]').each(function () {
    if ($(this).is(':checked')) {
      CheckArr.push($(this).attr('value'))
    }
  });
  init(CheckArr);
})

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><input type="checkbox" value="caplessthan100mb">caplessthan100mb</li>
  <li><input type="checkbox" value="cap100to500mb">cap100to500mb</li>
  <li><input type="checkbox" value="cap500mbto2g">cap500mbto2g</li>
  <li><input type="checkbox" value="cap2gto10g">cap2gto10g</li>
  <li><input type="button" id="btnFilter" value="Filter"></li>
</ul>
<br />
<ul id="container">
  
</ul>

Rocky Sims · Accepted Answer · 2016-12-06 08:26:14Z

There are quite a few things in your code that could use improvement so I've taken the liberty of largely rewriting it (see jsFiddle link below).

1) First thing is in your data (jsn) you are using "False" and "True" instead of false and true. That'll make it hard to write your filter condition because true != "True".

2) It's quite hard to debug your code because the variable names aren't very meaningful. I'd highly recommend putting some energy into improving your variable names especially when code isn't working.

For example:

packsData instead of jsn

checkedBoxes instead of arr

3) If you try to filter within the .each() below you'll run into trouble when it matches more than one filter condition (it'll be displayed more than once).

$(arr).each(function (i, v) {
    // this section must be filter "pack's" but i can't writ correct query
    li += '<li>' + jsn[key].name + '</li>';
});

Here is a working jsFiddle

Collectives™ on Stack Overflow

Filter JSON object with Array of selected checkbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related