JSONのフィルタリングに関するロジックを変更する必要があります

Question

チェックボックスを使用してJSONコンテンツをフィルタリングしています。ロジックを変更する必要がある以外は、以下のコードが機能します。現在、1つのチェックボックスを選択して送信を押すと、その値が「Y」のすべてのアイテムが表示されます。今問題は、複数のチェックボックスを選択して、「organic」や「bpa-free」などのすべてを表示するのではなく、両方の値に「Y」を持つ項目だけを表示する場合です。両方をチェックすると、アイテムにはオーガニックとbpa-freeの両方に「Y」が必要です。一方が「Y」で他方が「Y」でない場合、それは他の項目を示さない。どのようにすれば、すべての商品でそのフィルタリングを行うことができますか？基準に正確に一致する商品を表示するだけですか？これは理にかなっていますか？基本的には、表示するチェックボックスで選択されているものと一致する「Y」を持つものすべてを表示したいだけです。私は下のサンプルをありがとう！

JS Fiddle

var sampleItems = [{ 
    name : "All", 
    gmoFree : 'Y', 
    bpaFree : 'Y', 
    glutenFree : 'Y', 
    lowSodium : 'Y', 
    kosherSym : 'Y', 
    organic : 'Y' 
}, { 
    name : "None", 
    gmoFree : 'N', 
    bpaFree : 'N', 
    glutenFree : 'N', 
    lowSodium : 'N', 
    kosherSym : 'N', 
    organic : 'N' 
}, { 
    name : "GMO and Gluten Free", 
    gmoFree : 'Y', 
    bpaFree : 'N', 
    glutenFree : 'Y', 
    lowSodium : 'N', 
    kosherSym : 'N', 
    organic : 'N' 
}]; 

$('#submitFilter').click(function() { 
var availableFilters = []; 
    var activeFilters = []; 
    var $filters = $('.filters').each(function() { 
    var value = $(this).val(); 
    availableFilters.push(value); 
    if ($(this).is(':checked')) { 
     activeFilters.push(value); 
    } 
    }); 
    var filteredItems = sampleItems.filter(function(item) { 
    return availableFilters.every(function(filter) { 
     if (activeFilters.indexOf(filter) > -1) { 
     return item[filter] === 'Y'; 
     } 
     return true; 
    }); 
    }); 
    var $list = $('#list').empty(); 
    $.each(filteredItems, function(index, item) { 
    $list.append($('<LI>').text(JSON.stringify(item))); 
    }); 
}); 

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<form> 
    <div class="checkbox"> 
    <label><input type="checkbox" class="filters" 
        name="filter-gulten" value="glutenFree">Gluten Free</label> 
    </div> 
    <div class="checkbox"> 
    <label><input type="checkbox" class="filters" 
        name="filter-non-gmo" value="gmoFree">Non-GMO</label> 
    </div> 
    <div class="checkbox"> 
    <label><input type="checkbox" class="filters" 
        name="filter-organic" value="organic">Organic</label> 
    </div> 
    <div class="checkbox"> 
    <label><input type="checkbox" class="filters" 
        name="filter-low-sodium" value="lowSodium">Low Sodium</label> 
    </div> 
    <div class="checkbox"> 
    <label><input type="checkbox" class="filters" 
        name="filter-bpa-free" value="bpaFree">BPA Free</label> 
    </div> 
    <div class="checkbox"> 
    <label><input type="checkbox" class="filters" 
        name="filter-kosher" value="kosherSym">Kosher</label> 
    </div> 
    <button type="button" id="submitFilter" class="btn btn-primary">Submit</button> 
    <button type="button" id="clearFilter" class="btn btn-primary">Clear</button> 
</form> 
<h2>Results</h2> 
<ul id="list"></ul> 

Answer 1

はちょうどあなたのフィドルからJavaScriptコードの少量を変更：ステップの

$('#submitFilter').click(function() { 
    var availableFilters = []; 
    var activeFilters = []; 
    var $filters = $('.filters').each(function() { 
    var value = $(this).val(); 
    availableFilters.push(value); 
    if ($(this).is(':checked')) { 
     activeFilters.push(value); 
    } 
    }); 
    var filteredItems = sampleItems.filter(function(item) { 
    // Changed here ************* 
    if (!activeFilters.length) return true; 
    for (var i = 0; i < activeFilters.length; i++) { 
     if(item[activeFilters[i]] === 'Y') return true; 
    } 
    return false; 
    // to here ************* 
    }); 
    var $list = $('#list').empty(); 
    $.each(filteredItems, function(index, item) { 
    $list.append($('<LI>').text(JSON.stringify(item))); 
    }); 
}); 

概要：

• を全くフィルタが存在しない場合は、trueを返します
• 各フィルタを確認してtrueを返します。一致する場合
• フィルタが一致しない場合はfalseを返します。