В этом задании мы научимся фильтровать данные по нескольким критериям одновременно.
Фильтрация данных - это важная функция в любом интернет-магазине или каталоге. Пользователь должен быстро находить нужные товары среди сотен или тысяч позиций.
В JavaScript для фильтрации массивов используется метод filter. Он возвращает новый массив, содержащий только те элементы, для которых функция вернула true:
Для поиска по тексту используется метод toLowerCase() для регистронезависимого поиска и includes() для проверки вхождения подстроки:
const query ='ноут';const found = products.filter(product=> product.name.toLowerCase().includes(query.toLowerCase()));
Чтобы проверить, заполнено ли поле фильтра, используем условия:
if(minPrice !==''){// Применяем фильтр по минимальной цене}
Задание
Необходимо создать систему фильтрации товаров. Создайте четыре состояния: category (начальное значение 'all'), minPrice (пустая строка), maxPrice (пустая строка) и searchQuery (пустая строка). Отфильтруйте массив PRODUCTS по следующим критериям: если category !== 'all', оставить только товары этой категории; если minPrice не пустое, оставить товары с ценой больше или равной minPrice; если maxPrice не пустое, оставить товары с ценой меньше или равной maxPrice; если searchQuery не пустое, оставить товары, в названии которых содержится поисковый запрос (без учёта регистра). Создайте элементы управления для всех фильтров и покажите количество найденных товаров. Добавьте кнопку сброса всех фильтров.