試圖通過複選框篩選JSON內容

我對JS和JQuery很新穎，我試圖使用複選框過濾頁面上的JSON數據。到目前爲止，我已經得到它爲每個選中的複選框工作。除了我有一個問題。我怎樣才能讓這段代碼更好，讓你選擇多個複選框，它顯示了這兩個數據。以下是我的代碼。試圖通過複選框篩選JSON內容

//filter data with checkboxes 
 
$('#submitFilter').click(function() { 
 
    var final = ''; 
 
    $('.filters:checked').each(function() { 
 
    var values = $(this).val(); 
 
    final += values; 
 
    }); 
 

 
    var globalFilterVariable = ''; 
 
    var categoryImage = ''; 
 

 
    $.each(product_data, function(i, item) { 
 
    if (final.indexOf("1") >= 0) { 
 
     globalFilterVariable = item.itemGlutenFree; 
 
    } else if (final.indexOf("2") >= 0) { 
 
     globalFilterVariable = item.itemGMOFree; 
 
    } else if (final.indexOf("3") >= 0) { 
 
     globalFilterVariable = item.itemOrganic; 
 
    } else if (final.indexOf("4") >= 0) { 
 
     globalFilterVariable = item.itemLowSodium; 
 
    } else if (final.indexOf("5") >= 0) { 
 
     globalFilterVariable = item.itemBPAFree; 
 
    } else if (final.indexOf("6") >= 0) { 
 
     globalFilterVariable = item.itemKosherSym; 
 
    } 
 

 
    //convert JSON strings to uppercase for comparison 
 
    var brandLetter = item.itemBrandLetter.toUpperCase(); 
 
    var foodService = item.itemDeli.toUpperCase(); 
 

 
    if (globalFilterVariable !== "N" && globalFilterVariable !== "n" && globalFilterVariable !== "" && brandLetter == "C" && foodService == "N") { 
 
     categoryImage += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">' + '<a href="#"' + 'class="showProduct"' + 'data-itemcategory="' + item.itemCategory + '"' + 'data-itempageurl="' + item.itemFullUPC + '"' + 'data-itemgmo="' + item.itemGMOFree + '"' + 'data-itembpa="' + item.itemBPAFree + '"' + 'data-itemgluten="' + item.itemGlutenFree + '"' + 'data-itemlowsodium="' + item.itemLowSodium + '"' + 'data-itemkosher="' + item.itemKosherSym + '"' + 'data-itemorganic="' + item.itemOrganic + '"' + 'data-itemimage="' + item.imageURL + '"' + 'data-itemname="' + item.itemName + '"' + 'data-itemoz="' + item.itemPackSize + '"' + 'data-itemdescription="' + item.itemDescription + '"' + 'data-itemupc="' + item.itemFullUPC + '">' + '<img class="img-responsive img-hover productImagesCategory" src="' + item.imageURL + '">' + '<h3>' + item.itemName + '</h3>' + '</a>' + '</div>'; 
 
     console.log(globalFilterVariable); 
 
    } 
 
    }); 
 
    $('#imagesCategoryProducts').hide().html(categoryImage).fadeIn('slow'); 
 
    closeNav(); 
 
});

<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" id="filter-gulten" class="filters" value="1">Gluten Free</label> 
 
    </div> 
 
    <div class="checkbox"> 
 
    <label> 
 
     <input type="checkbox" id="filter-non-gmo" class="filters" value="2">Non-GMO</label> 
 
    </div> 
 
    <div class="checkbox"> 
 
    <label> 
 
     <input type="checkbox" id="filter-organic" class="filters" value="3">Organic</label> 
 
    </div> 
 
    <div class="checkbox"> 
 
    <label> 
 
     <input type="checkbox" id="filter-low-sodium" class="filters" value="4">Low Sodium</label> 
 
    </div> 
 
    <div class="checkbox"> 
 
    <label> 
 
     <input type="checkbox" id="filter-bpa-free" class="filters" value="5">BPA Free</label> 
 
    </div> 
 
    <div class="checkbox"> 
 
    <label> 
 
     <input type="checkbox" id="filter-kosher" class="filters" value="6">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>

[ 
    { 
     "_id":"57741c92cce3c4c741000002", 
     "itemGMOFree":"Y", 
     "itemBrandLetter":"C", 
     "itemKosherSym":"OU", 
     "itemShipper":"N", 
     "itemRefridge":"N", 
     "itemFrozen":"N", 
     "itemPreWeight":"Y", 
     "itemDeli":"N", 
     "itemGlutenFree":"Y", 
     "itemHoliday":"N", 
     "itemSeasonBuy":"N", 
     "itemScannable":"N", 
     "itemUnlabeled":"N", 
     "itemPalletWeight":2368.8, 
     "itemPalletTiers":11, 
     "itemPalletBlocks":17, 
     "itemCaseCube":0.29, 
     "itemCaseDepth":12, 
     "itemCaseWidth":9, 
     "itemCaseHeight":4.75, 
     "itemCaseWeight":12.4, 
     "itemCaseUnits":12, 
     "itemPieceCube":0.02, 
     "itemPieceDepth":2.88, 
     "itemPieceWidth":2.88, 
     "itemPieceHeight":4.25, 
     "itemPieceWeight":1, 
     "itemNetContent":"14", 
     "itemFullUPC":"070796400032", 
     "itemCountry":"Italy", 
     "itemPackSize":"12/14 oz", 
     "itemUOM":"OZ", 
     "itemDescription":"0", 
     "itemName":"test", 
     "itemBuildNum":0, 
     "itemSuffix":2, 
     "itemItem":40003, 
     "itemMFG":70796, 
     "itemPrefix":0, 
     "itemCase_GTIN":30, 
     "itemPiece_GTIN":0, 
     "imageURL":"test.jpg", 
     "itemCommodity":"1120", 
     "__v":0, 
     "itemLastUpdated":"1/19/2017 9:56:16 AM", 
     "itemVendor":0, 
     "itemBPAFree":"Y", 
     "itemLowSodium":"N", 
     "itemOrganic":"N", 
    } 
]

來源

2017-01-23 Tom

我會用'，而不是result''final'，因爲它通常是一個保留字，甚至儘管在JavaScript中作爲變量名可能會「確定」。此外，獲取選定的值，並將其用作鍵查找，而不是使用非常詳細的if-else條件... –

@ Mr.Polywhirl感謝您的建議。你認爲你能爲我提供一個簡單的例子嗎？將非常感謝 – Tom

'product_data'看起來像什麼？ – Jerrad

不是100％肯定你想什麼來完成，但你可以改變你的複選框的value屬性存儲要查找的名稱。

然後，您可以獲取所有這些檢查值並使用它們來查找所需的篩選器。不知道爲什麼你的globalFilterVariable是一個字符串，所以我不能太過分。我只抓住了第零個元素。

// Filter data with checkboxes 
 
$('#submitFilter').click(function() { 
 
    var filters = []; 
 
    $('.filters').find(':checked').each(function() { 
 
    filters.push($(this).val()); 
 
    }); 
 

 
    var globalFilterVariable = ''; 
 
    var categoryImage = ''; 
 

 
    $.each(product_data, function(i, item) { 
 
    // Figure out what you want to do with the rest of the filters. 
 
    globalFilterVariable = item[filters[0]]; 
 
    
 
    // Convert JSON strings to uppercase for comparison 
 
    var brandLetter = item.itemBrandLetter.toUpperCase(); 
 
    var foodService = item.itemDeli.toUpperCase(); 
 

 
    if (['N', 'n', ''].indexOf(globalFilterVariable) === -1 
 
      && brandLetter == "C" && foodService == "N") { 
 
     categoryImage += '<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">' 
 
     + '<a href="#"' + 'class="showProduct" ' 
 
      + 'data-itemcategory="' + item.itemCategory + '" ' 
 
      + 'data-itempageurl="' + item.itemFullUPC + '" ' 
 
      + 'data-itemgmo="' + item.itemGMOFree + '" ' 
 
      + 'data-itembpa="'+ item.itemBPAFree + '" ' 
 
      + 'data-itemgluten="' + item.itemGlutenFree + '" ' 
 
      + 'data-itemlowsodium="' + item.itemLowSodium + '" ' 
 
      + 'data-itemkosher="' + item.itemKosherSym + '" ' 
 
      + 'data-itemorganic="' + item.itemOrganic + '" ' 
 
      + 'data-itemimage="' + item.imageURL + '" ' 
 
      + 'data-itemname="' + item.itemName + '" ' 
 
      + 'data-itemoz="' + item.itemPackSize + '" ' 
 
      + 'data-itemdescription="' + item.itemDescription + '" ' 
 
      + 'data-itemupc="' + item.itemFullUPC + '">' 
 
     + '<img class="img-responsive img-hover productImagesCategory" src="' + item.imageURL + '">' 
 
     + '<h3>' + item.itemName + '</h3>' 
 
     + '</a>' 
 
     + '</div>'; 
 
     console.log(globalFilterVariable); 
 
    } 
 
    }); 
 
    $('#imagesCategoryProducts').hide().html(categoryImage).fadeIn('slow'); 
 
    closeNav(); 
 
});

<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="itemGlutenFree">Gluten Free</label> 
 
    </div> 
 
    <div class="checkbox"> 
 
    <label><input type="checkbox" class="filters" 
 
        name="filter-non-gmo" value="itemGMOFree">Non-GMO</label> 
 
    </div> 
 
    <div class="checkbox"> 
 
    <label><input type="checkbox" class="filters" 
 
        name="filter-organic" value="itemOrganic">Organic</label> 
 
    </div> 
 
    <div class="checkbox"> 
 
    <label><input type="checkbox" class="filters" 
 
        name="filter-low-sodium" value="itemLowSodium">Low Sodium</label> 
 
    </div> 
 
    <div class="checkbox"> 
 
    <label><input type="checkbox" class="filters" 
 
        name="filter-bpa-free" value="itemBPAFree">BPA Free</label> 
 
    </div> 
 
    <div class="checkbox"> 
 
    <label><input type="checkbox" class="filters" 
 
        name="filter-kosher" value="itemKosherSym">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>

這裏有一個更簡單的方法來了解如何通過鑰匙來過濾對象的列表。

如果你想只匹配您準確你哪些檢查過的項目，用這個表達，而不是：

var filteredItems = sampleItems.filter(function(item) { 
    return availableFilters.every(function(filter) { 
    return !!item[filter] === activeFilters.indexOf(filter) > -1; 
    }); 
});

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>

來源

2017-01-23 17:19:15

我剛剛使用globalFilterVariable作爲最初更改if語句內容的方法。但即時通訊嘗試上面的代碼，似乎無法得到它的工作。我的代碼爲undefined undefined – Tom

但我想要做的是根據點擊哪個複選框顯示相應的項目 – Tom

@Tom在我的原始答案下面查看我的更簡單的回覆。 –

不知道你想做什麼在這裏，但您可以通過用項目名稱替換值來使循環更高效

<form> 
    <div class="checkbox"> 
    <label> 
     <input type="checkbox" id="filter-gulten" class="filters" value="itemGlutenFree">Gluten Free</label> 
    </div> 
    <div class="checkbox"> 
    <label> 
     <input type="checkbox" id="filter-non-gmo" class="filters" value="itemGMOFree">Non-GMO</label> 
    </div> 
    <div class="checkbox"> 
    <label> 
     <input type="checkbox" id="filter-organic" class="filters" value="itemOrganic">Organic</label> 
    </div> 
    <div class="checkbox"> 
    <label> 
     <input type="checkbox" id="filter-low-sodium" class="filters" value="itemLowSodium">Low Sodium</label> 
    </div> 
    <div class="checkbox"> 
    <label> 
     <input type="checkbox" id="filter-bpa-free" class="filters" value="itemBPAFree">BPA Free</label> 
    </div> 
    <div class="checkbox"> 
    <label> 
     <input type="checkbox" id="filter-kosher" class="filters" value="itemKosherSym">Kosher</label> 
    </div> 
    <button type="button" id="submitFilter" class="btn btn-primary">Submit</button>

清除

，並使用簡單的循環，以獲得該項目的鍵

$('#submitFilter').click(function() { 
    var final = []; 
    $('.filters:checked').each(function() { 
    var values = $(this).val(); 
    final.push(values); 
    }); 
    for(var i=0;i<final.length,i++){ 
    globalFilterVariable = item[final[i]]; 
    //further statements 
    } 
});

來源

2017-01-23 17:21:05 acesmndr

你可以把這個做成一個工作的例子請 – Tom

看看下面的小提琴：https://jsfiddle.net/bxoahfum/

不需要jQuery的...我希望它在正確的方向。

HTML

<input data-filter="gluten" type="checkbox"> Gluten<br/> 
<input data-filter="organic" type="checkbox"> Organic<br/> 
<input data-filter="bpa"  type="checkbox"> BPA Free<br/> 

<button id="filter">Filter!</button> 

<div id="results"></div>

var items = [ 
    { name : 'product 1', gluten : true, organic : true, bpa : false }, 
    { name : 'product 2', gluten : true, organic : false,bpa : true }, 
    { name : 'product 3', gluten : true, organic : true, bpa : true } 
]; 

var filters = ['gluten','organic','bpa']; 

filter.onclick = function(){ 

    results.innerHTML = ''; 

    items.forEach(function(item){ 

    var show = true; 

    filters.forEach(function(filter){ 

     $el = document.querySelector('[data-filter="'+filter+'"]'); 
     if($el.checked && !item[filter]) show = false; 

    }); 

    if(show){ 
     $result = document.createElement('div'); 
     $result.innerHTML = item.name; 
     results.appendChild($result); 
    } 

    }); 
};

這是猶太

來源

2017-01-23 17:30:25 levi

我的數據結構是不同的。我怎樣才能達到與這種數據格式相同的結果。請看我原來的帖子 – Tom

試圖通過複選框篩選JSON內容

回答

相關問題