过滤与选定的复选框数组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);

来源

2016-12-06 Arman Feyzi

你能否详细说明你有什么真正想要的？ –

首先，您必须验证阵列的lengthinit功能之外。（用于第一次调用函数的情况）。然后，您需要迭代您的复选框数组并搜索您的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(){ 
 
\t 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>

来源

2016-12-06 07:37:31

有在你的代码相当多的东西，可以使用改善，所以我已经采取的大幅改写它的自由（见下面的jsfiddle链接）。

1）第一件事就是你的数据（jsn）使用的是"False"和"True"代替false和true。这会让你很难写出你的过滤条件，因为true != "True"。

2）调试代码非常困难，因为变量名称不是很有意义。我强烈建议在改善你的变量名称时尤其如此，特别是当代码不工作时。

例如：

packsData而不是jsn

checkedBoxes的arr

3）如果您尝试。每个（内筛选）下面你会遇到麻烦它匹配的时候，而不是多个过滤条件（它会多次显示）。

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

来源

2016-12-06 08:18:31

过滤与选定的复选框数组JSON对象

回答

相关问题