Как отфильтровать продукты json в данном случае?

Question

[vladislav3101]

С сервера приходят продукты, фильтры и получается в итоге:

const initialState = {
 categories: [{id: 1, name: 'Категория-1'}],
 products: [
     {id: 1, title: 'Продукт-1', price: 1, discount: true, free: false},
     {id: 2, title: 'Продукт-2', price: 2, discount: false, free: false},
     {id: 3, title: 'Продукт-3', price: 5, discount: true, free: true},
 ],
 filters: {
     categories: [{categoryId: 1, isChecked: true}],
     promotion: [{id: 1, name: 'discount', value: 'Скидка', isChecked: false}, {id: 2, name: 'free', value: 'Бесплатно', isChecked: false}]
 }
}

Как можно отфильтровать продукты по ключу

promotion

из объекта filters.
Конечно было бы проще, если фильтры мне были известны и я просто сделал что то подобное:

promotion: {
  isDiscountChecked: false,
  isFreeChecked: false 
}

const Products = ({products, filters}) => {
  return (
     <>
       {filters.promotion.isDiscountChecked && products.filter(item => item.isChecked === true).map(product => <div>...</div>)}
       // ....
    </>
  );
}

Но как решить данную задачу, если мне неизвестны фильтры заранее?

Answer 1

[VladimirAsmo]

Если я правильно понял задачу, то можно вот так.

const Products = ({products, filters}) => {
  const filteredProducts = products.filter((product) => { 
    const currentFilter = filters.promotion.find((filter) => product.id === filter.id);

    if (!currentFilter) return true; // or do something else
    if (!product.hasOwnProperty(currentFilter.name)) return true;

    return product[currentFilter.name] === currentFilter.value;
  });

  return (
     <>
       {filteredProducts.map(...)}
    </>
  );
}

Такое решение будет работать если ваши products и filter.promotion согласуют типы данных. Сейчас у вас каша. products.discount хранит boolean, а filter.promotion[0].value - string. Чтобы корректно сравнить, они должны быть одного типа, ну или определиться какие строковые значения у вас будут означать true, а какие false.