Как правильно отфильтровать карточки
Фильтр выполнен в виде формы
Данные
[
{"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 запрос к Бд в качестве параметров будут выступать собранные значения формы.
Буду благодарен за помощь!