javascript - 使用选中复选框的数组过滤 JSON 对象

Question

我如何使用数组过滤我的 JSON 对象。

FIDDLE

这是我的 json 对象和代码的示例，我想通过选中的复选框过滤最终呈现的 HTML。

谢谢你的帮助

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);

Answer 1

首先，您必须在init 函数之外验证数组的length。 (对于第一次调用函数的情况)。然后，您需要迭代复选框数组并搜索 json 数组(称为 jsn)中的每个项目以验证您需要的条件。

解决方法:

$(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>