Как я могу показать товары для определенной категории

#javascript

#язык JavaScript

Вопрос:

Привет, я хочу показать элементы только для определенной категории, поэтому, когда пользователь находится на html-странице, он может выбрать категорию, а затем он должен показывать элементы только для этой категории, это «vareKategori», где вы можете выбрать.[См.Ее интерфейс][1] на данный момент я могу отображать все товары, но я не могу получить товары только для одной категории. Было бы так здорово, если бы кто-нибудь показал мне, как это делается, тх.

Пожалуйста,помогите, это для экзаменационного проекта.

 this is my code for now: // Jeg laver en function som tager userinputtet fra det de skriver. Det gør jeg både for nyt userID og nyt password    document.addEventListener("DOMContentLoaded", (event) =gt; {  document.getElementById("form").addEventListener("submit", (event) =gt; {  event.preventDefault();   const varer = document.getElementById("varer").value;  const pris = document.getElementById("pris").value;  const vareKategori = document.getElementById("vareKategori").value;  const billede = document.getElementById("billede").value   const opretVare = {  varer: varer,  pris: pris,  vareKategori: vareKategori,  billede: billede  };   fetch("http://localhost:8200/varer/createvarer", {  method: "POST",  headers: {  'Accept': 'application/json',  'Content-Type': 'application/json'  },  body: JSON.stringify(opretVare),  })  //converter det til Json  .then((response) =gt; response.json())  .then((response) =gt; {  if (response) {  location.href = "/varer.html";  }  })  .catch(() =gt; {  window.alert("Der skete en fejl");  });  }); });   async function getGoods() {  const response = await fetch("http://localhost:8200/varer/getproducts")  const result = await response.json()  return result }  async function deleteGoods(id) {  const response = await fetch("http://localhost:8200/varer/getproducts/"   id, {   method: 'DELETE'  })  const result = await response.json()  return result }  function renderTable(goods) {  const table = document.getElementById('varerTable');  let tableHtml = `  lt;trgt;  lt;thgt;  lt;label Varekategori:lt;/labelgt;  lt;select name="kategori" id="kategori"gt;  lt;option value="mad"gt;Madlt;/optiongt;  lt;option value="drikkelse"gt;Drikkelselt;/optiongt;  lt;/selectgt;  lt;/thgt;    lt;thgt;Varelt;/thgt;   lt;thgt;Prislt;/thgt;  lt;thgt;Billedelt;/thgt;  lt;/trgt;`;  for (const row of goods){  tableHtml  = `  lt;trgt;  lt;tdgt;${row.vareKategori}lt;/tdgt;  lt;tdgt;${row.varer}lt;/tdgt;  lt;tdgt;${row.pris}lt;/tdgt;  lt;tdgt;lt;img src="${row.billede}" style="height:100px;width000px;"lt;/tdgt;  lt;tdgt;lt;button onclick = "handleDelete(${row.id})"gt; Delete lt;/buttongt;lt;/tdgt;  lt;tdgt;lt;button onclick ="toDo"gt; Edit lt;/buttongt;lt;/tdgt;  lt;/trgt;  `;  }  table.innerHTML = tableHtml; }  async function handleDelete(id) {  try {  await deleteGoods(id)  const goods = await getGoods()  renderTable(goods)  } catch(err) {  console.error(err)  }  }  async function handleLoad() {  try {  const goods = await getGoods()  renderTable(goods)  } catch(err) {  console.error(err)  }  }  document.getElementById("clickMe").addEventListener('click', handleLoad);  

маршруты

 router.put("/opdater_products/:varer", (req, res)=gt;{  let category = req.params.varer;  if(products[category]){  products[category] = req.body.pris;  res.status(200).json({[category]:products[category]});  }  else{  res.send(404)  }  });  

Модель

 class Goods {  constructor(varer, pris, vareKategori, billede) {  this.varer = varer;  this.pris = pris;  this.vareKategori = vareKategori;  this.billede = billede;  }  }  module.exports = Goods;  

Ответ №1:

Это немного сложно понять, но, может Array.prototype.filter быть, это то, чего вы хотите? Например, если у вас есть список продуктов,

 let categoryToSort = 'foo'; let products = [  {  'name': 'whatever',  'categories': ['foo', 'baz'],  },  {  'name': 'baz',  'category': ['bar'],  } ];   // Filter let filteredProducts = products.filter(p =gt; p.category.includes(categoryToSort));  // Output filtered array  console.log(filteredProducts);  /** output:  {  'name': 'whatever',  'category': ['foo', 'baz'],  }, **/