Как сделать фильтр на Checkbox'ах?

Question

[Kerhin]

У меня возникло желание реализовать небольшую фильтрацию данных массива по нескольким категориям одновременно, но пришел к осознанию того, что плохо понимаю как это сделать. Как реализовать фильтрацию по 1-й категории я осознаю, но как допустим фильтровать контент через Checkbox одновременно по разным категориям, я уже не знаю.

Как допустим реализовать фильтр по 2-м категориям на основе данного массива? Скажем 4 checkbox'а для фильтрации страны, и 3 отдельных Checkbox'а для дополнительной фильтрации жанра.

const products = [
  { country: 'Russia', img: 'link.img', genre: 'Comedy', name: 'Вишнёвый сад' },
  { country: 'France', img: 'link.img', genre: 'Novel', name: 'Oberman' },
  { country: 'Italy', img: 'link.img', genre: 'Adventures', name: 'Il cimitero di Praga' },
  { country: 'USA', img: 'link.img', genre: 'Comedy', name: 'The Ransom of Red Chief' }
];

Comments

[uRoot]

Тоже буквально вчера гуглил этот же вопрос. Я нашёл такой мануал:

https://learn-reactjs.ru/basics/thinking-in-react

Answer 1

[Иван Клименко]

К React, надо сказать, ваш вопрос имеет самое посредственное отношение.

Реализовать фильтрацию массива объектов по нескольким ключам можно примерно вот так:

function filter(array = [], filters = {}) {
    const keys = Object.keys(filters).filter(key => filters.hasOwnProperty(key));
    return array.filter(elem => {
        const commonKeys = keys.filter(key => elem.hasOwnProperty(key));
        return commonKeys.reduce((flag, key) => (flag && filters[key].includes(elem[key])), true);
    });
}

В filters кладёте допустимые значения по соответствующим ключам. Например:

const products = [
    {country: 'Russia', img: 'link.img', genre: 'Comedy', name: 'Вишнёвый сад'},
    {country: 'France', img: 'link.img', genre: 'Novel', name: 'Oberman'},
    {country: 'Italy', img: 'link.img', genre: 'Adventures', name: 'Il cimitero di Praga'},
    {country: 'USA', img: 'link.img', genre: 'Comedy', name: 'The Ransom of Red Chief'}
];

const filters = {
    country: ['Russia', 'Italy', 'France'],
    genre: ['Comedy', 'Novel']
};

const filteredProducts = filter(products, filters);

Comments

[uRoot]

К React, надо сказать, ваш вопрос имеет самое посредственное отношение

А если из массива объектов формируются карточки товаров и не подходящие по фильтру нужно скрывать/удалять? Стоит ли заводить стейт или это избыточно? Может у вас есть пример реализации такого простого функционала.

[Иван Клименко]

CryNet, так а в чём проблема? У вас же наверняка есть компонент-коллекция, который в себе выводит карточки. Просто передайте ему массив с необходимыми карточками, стейт не нужен.

[uRoot]

Иван Клименко,

так а в чём проблема?

Проблема в том, что много возможных реализаций и сложно понять как лучше. Ваш вариант, кстати, я не рассматривал. Думал, что правильно будет через стейт и componentDidUpdate().

Answer 2

[bpGusar]

Используй .filter

Например

products.filter(product => product.country === "Russia" && product.country === "Italy")

P.S код от балды но суть такая