Вообще не то, во-первых у меня отдельный JSON файл, а в этом примере массив в файле JS, вторых в примере вашем индексный масив а у меня асоциативний, и самое главное такому новичку как я такой сложный код как вы сбросили адаптировать под свой код это что-то из области фантастики. Надеюсь на то, что кто-то редактирует мой код и соединит этот JS:
$('document').ready(function(){
loadGoods();
});
function loadGoods() {
//загружаю товары на страницу
$.getJSON('goods.json', function (data) {
//console.log(data);
var out = '';
for (var key in data){
out+='<div class="single-goods">';
out+='<h3>'+data[key]['name']+'</h3>';
out+='<p>Цена: '+data[key]['cost']+'</p>';
out+='<img src="'+data[key].image+'">';
out+='<button class="add-to-cart" data-art="'+key+'">Купить</button>';
out+='</div>';
}
$('#goods').html(out);
$('button.add-to-cart').on('click', addToCart);
});
}
+с этим js кодом(редактировав его что б он фильтровал не в html по класу а в json по свойству
var allProducts = document.getElementsByClassName('placeholder');
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var selected_countries = [];
// отобразить все товары
document.getElementsByClassName('btn-filter')[0].addEventListener('click', function(){
for(var i = 0; i < allProducts.length; i++) {
allProducts[i].style.display = 'block';
}
});
// ловим клики по чекбоксам
for(var k = 0; k < checkboxes.length; k++) {
checkboxes[k].addEventListener('click', function(){
showHideProducts(this);
});
}
// и скрываем или отображаем соответственные ячейки товаров
function showHideProducts(thisInput) {
if(thisInput.checked == true) { // при проставлении галки
// добавляем страну в массив выбранных стран
selected_countries.push(thisInput.value);
} else { // а при снятии галки
var index = selected_countries.indexOf(thisInput.value);
if(index > -1) {
// удаляем страну с массива
selected_countries.splice(index, 1);
}
}
for(var i = 0; i < allProducts.length; i++) {
// берем второй класс ячейки товара т.е. его страну
var secondClass = allProducts[i].className.split(' ')[1];
// если второй класс ячейки товара (страна) НЕ содержится в массиве выбранных стран
if(!~selected_countries.indexOf(secondClass)) {
allProducts[i].style.display = 'none'; // тогда скрываем ячейку
} else { // а если содержится
allProducts[i].style.display = 'block'; // тогда отображаем
}
}
}