фильтр объекта за полученным id

151

04 мая 2019, 14:20

Есть объект с товарами:

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>

Answer 1

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" 
  } 
}; 
 
function filterProducts(products, category) { 
  var res = {}; 
  for (var key in products) { 
    if (products[key].category == category) 
      res[key] = products[key]; 
  } 
  return res; 
} 
 
function showProductsByCategory(category) { 
  var filtered = filterProducts(products, category); 
  //console.log(filtered); 
 
  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">Quantity</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; 
}

<select onchange="showProductsByCategory(this.value)"> 
  <option value="" disabled selected>Select category ...</option> 
  <option value="tshirts">tshirts</option> 
  <option value="cups">cups</option> 
</select> 
<div class="product_container" id="product_container"> </div>

к сожалению вариант с выпадающим списком не подходит, так как есть плитка с изображениями-ссылками на категории, после клика на которые, должен открываться блок с товаром

Дорогая Мария! Простите меня, если сможете, за то, что я сам не догадался про Вашу плитку (она у Вас, кстати, газовая или электрическая?). Такой профессионал, как я, должен был сразу подумать: "У Марии, наверное, плитка."

document.querySelectorAll(".container2 .block_1 a").forEach( 
  i => i.addEventListener("click", function(e) { 
    console.log("Category: ", this.id); 
    showProductsByCategory(this.id); 
  }) 
);

<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> 
</div>