Question

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

这是我的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

首先，您必须在length函数之外验证数组的init。（对于第一次调用函数的情况）。然后，您需要迭代复选框数组并搜索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>

Answer 2

你的代码中有很多东西可以使用改进，所以我冒昧地重写它（参见下面的jsFiddle链接）。

1）首先，您使用jsn和"False"代替"True"和false的数据（true）。由于true != "True"。

，因此很难编写过滤条件

2）调试代码非常困难，因为变量名称不是很有意义。我强烈建议为改进变量名称投入一些精力，特别是在代码不能正常工作时。

例如：

packsData代替jsn

checkedBoxes代替arr

3）如果你试图在下面的.each（）中进行过滤，当它匹配多个过滤条件时会遇到麻烦（它会多次显示）。

$(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>';
});

这是working jsFiddle

使用所选复选框的数组筛选JSON对象

2 个答案: