Есть объект с товарами:
let products = {
"11": {
"category" : "tshirts",
"name": "One",
"price": 300,
"image" : "images/tshirts.jpg"
},
"12": {
"category" : "tshirts",
"name": "Two",
"price": 312,
"image" : "images/tshirt2.jpg"
},
"21": {
"category" : "cups",
"name": "Enlish cup",
"price": 25,
"image" : "images/cup.jpg"
},
"22": {
"category" : "cups",
"name": "Flower cup",
"price": 10,
"image" : "images/cup.jpg"
}
}
происходит клик на категорию и открывается контейнер со значениями товаров из объекта
var selected_a;
container_2.onclick = function(event) {
var target = event.target; // find click
if (target.className != 'category_a') return; // ignore if false
open_category(target);
id = event.target.id;
var filter = {};
function filterProducts(products, category) {
for (var key in products) {
if (products[key].category == category)
filter[key] = products[key];
}
return filter;
}
console.log(filterProducts(products, id));
};
function open_category(node) {
if (selected_a) {
document.getElementById('product_container').style.display = 'none';
document.getElementById('container_2').style.display = 'block';
}
selected_a = node;
document.getElementById('product_container').style.display = 'flex';
document.getElementById('container_2').style.display = 'none';
}
но выводятся все товары с массива. Пытаюсь создать после этого новый объект с помощью filter.products, чтобы выводились только те товары, у которых category соответствует названию id, по которому кликнули. Уже много вариантов испробовано, но не срабатывает. Попытка вывести переменную event.target.id и прописать в условии фильтра не принесла результат, либо были ошибки. Как это можно сделать (буз jQuery)?
дальше идет код формирования контейнера с выбранной категорией:
var product_container = '';
for (var key in filtered) {
product_container+='<div class="product">';
product_container+='<div class="photo">';
product_container+='<img src="'+filtered[key].image+'" class="photo">';
product_container+='<div class="name">';
product_container+='<span class="price">$'+filtered[key].price +'</span>';
product_container+='<p>'+filtered[key].name +'<p>';
product_container+='</div>';
product_container+='</div>';
product_container+='<div class="quantity_container">';
product_container+='<span class="text_number">amount</span>';
product_container+='<div class="quantity">';
product_container+='<input type="button" data-articul="'+key+'" value="-"
class="minus" onclick="minus()">';
product_container+='<input data-articul="'+key+'" type="text" size="10"
value="1" class="number">';
product_container+='<input type="button" data-articul="'+key+'" value="+"
class="plus" onclick="plus()">';
product_container+='</div>';
product_container+='</div>';
product_container+='</div>';
}
document.getElementById('product_container').innerHTML = product_container;
выводится здесь:
<div class="product_container" id="product_container"> </div>
после клика здесь:
<div class="container2" id="container_2">
<div class="block_1">
<a href="#" class="category_a" id="tshirts">
<div class="name"><p>T-Shirts</p></div>
</a>
<a href="#" class="category_a" id="cups">
<div class="name2"><p>Cups</p></div>
</a>
</div>