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

Добрый день, Господа.

У меня возникло желание реализовать небольшую фильтрацию данных массива по нескольким категориям одновременно, но пришел к осознанию того, что плохо понимаю как это сделать. Как реализовать фильтрацию по 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' }
];
  • Вопрос задан
  • 472 просмотра
Решения вопроса 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);
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@skynet32rus
*spoiler*
Используй .filter

Например
products.filter(product => product.country === "Russia" && product.country === "Italy")


P.S код от балды но суть такая
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Leningrad Media Санкт-Петербург
от 80 000 до 140 000 ₽
SaveTime Москва
от 160 000 до 230 000 ₽
08 апр. 2020, в 04:51
16000 руб./за проект
08 апр. 2020, в 00:40
15000 руб./за проект