@dmitriu256

Как правильно отфильтровать карточки?

Как правильно отфильтровать карточки
600198ab810b8360830552.png
Фильтр выполнен в виде формы
600198bf15d19218753090.png

Данные
[
    {"id": 1,
        "title": "Оболонь",
        "descr": "сдан",
        "metro": "Минская",
        "address": "пр. Оболонский, 26",
        "location": {"id": 3, "loc": "< 10"},
        "status": {"id": 2, "status": "Сдан"},
        "services": true,
        "options": [
            {"id": 1, "option": "Двор без машин"},
            {"id": 3, "option": "Панорамные окна"},
            {"id": 4, "option": "Есть кладовые"}
        ]},  и так 10 карточек ...

Что хочу получить:
1) Данные беру из локального json файла
2) Когда пользователь заходит на сайт ajax-запросом выводятся все карточки из json
3) Когда пользователь выбирает значения в форме и нажимает "Применить" происходит фильтрация карточек по выбранным пунктам
4) После сброса фильтра - вновь видим все карточки.

Фильтрация по пункту Услуги - checkbox срабатывает
ВОПРОС!!!
Как правильно отфильтровать данные в такой структуре arr-> [ object[i].options: [{id:1, option: 'Опция'}]]
//Отправка формы
    form.addEventListener('submit', event => {
       event.preventDefault();

       //Формируем объект с данными
       const obj = {
           toggle: false
       };
       
       //Term
       const term = form.elements['term'];
        obj.term = term.value;


        //Options checkboxes
        const options = form.querySelectorAll('.checkbox__real');
        const op = [];
        options.forEach(opt => {
            if(opt.checked){
                op.push({[opt.name]: opt.value});
            }
        });
        obj.options = op;

        //Toggle checkbox
        const toggle = form.elements.comission;
        if(toggle.checked){
            toggle.value = true;
            obj.toggle = Boolean(toggle.value);
        }

        console.log(obj);

        //Фильтрация работает 
        const f1 = arr.filter(item => {
            return item.services === obj.toggle;
        });


        //Фильтрация дополнительные опции ПРОБЛЕМА
        const f2 = arr.filter(item => {

            //Хочу получить сравнения наподобии
            return item.options[].id === obj.options[].id;
        });
       
        console.log(f1);

        //Удаляем все карточки
        document.querySelectorAll('.card-link').forEach(card => {
            card.remove();
        });

        //Создаем карточки на основе фильтрации
        f1.forEach(item => {
            createCard(item);
        });
    });


Или чтобы не не городить "велосипед" с перебором и фильтрацией вложенных массивов объектов.
Сделать фильтр как положено связка AJAX-express.js-MySql
При первом заходе пользователя через AJAX метод Get запрос SELECT * на получения всех карточек из БД
При фильтровании отправить форму AJAX Post и на сервере сделать вложенный SELECT запрос к Бд в качестве параметров будут выступать собранные значения формы.
Буду благодарен за помощь!
  • Вопрос задан
  • 39 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
Artezio Москва
от 160 000 до 220 000 ₽
01 мар. 2021, в 17:17
800 руб./в час
01 мар. 2021, в 17:05
25000 руб./за проект
01 мар. 2021, в 16:46
150000 руб./за проект