@vladislav3101

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

С сервера приходят продукты, фильтры и получается в итоге:
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>)}
       // ....
    </>
  );
}

Но как решить данную задачу, если мне неизвестны фильтры заранее?
  • Вопрос задан
  • 51 просмотр
Пригласить эксперта
Ответы на вопрос 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.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы