選択した配列の配列を持つ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(){ 
 
\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>

Answer 2

私は主にそれを書き換える自由を撮影したような改善を使用することができ、あなたのコード内でかなりの数のものがあります（下のjsFiddleリンクを参照してください。ここで

はソリューションです）。

1）まず最初は、あなたが代わりにfalseとtrueの"False"と"True"を使用している（jsn）自分のデータです。それはtrue != "True"なのでフィルタ条件を書くことが難しくなります。

2）変数名があまり意味がないので、コードをデバッグするのは非常に難しいです。特にコードが機能していないときは、変数名の改善に力を入れることを強くお勧めします。

packsDataの代わりに、あなたがトラブルに実行されますの下にそれが一致したとき）.each（内フィルタリングしようとした場合arr

3）の代わりにjsn

checkedBoxes：たとえば

複数のフィルタ条件（複数回表示されます）。ここで

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