D
D
dmitriu2562021-01-15 16:57:14
MySQL
dmitriu256, 2021-01-15 16:57:14

How to filter cards correctly?

How to filter cards correctly
600198ab810b8360830552.png
The filter is made in the form
600198bf15d19218753090.png

Data

[
    {"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 карточек ...

What I want to get:
1) I take the data from the local json file
2) When the user enters the site with an ajax request, all cards from json are displayed
3) When the user selects values ​​​​in the form and clicks "Apply", the cards are filtered by the selected items
4) After the reset filter - we see all the cards again.

Filtering by item Services - checkbox works
QUESTION!!!
How to properly filter data in a structure like this arr-> [ object[i].options: [{id:1, option: '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);
        });
    });


Or in order not to block the "bicycle" with enumeration and filtering of nested arrays of objects.
Make the filter as it should be AJAX-express.js-MySql binding When
the user first logs in via the AJAX Get method, a SELECT * request to get all cards from the database
form values.
I will be grateful for your help!

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question