Как «синхронизировать» несколько фильтров?

Question

[alexnem]

Приветствую!

Есть массив данных, которые необходимо отфильтровать.
С одним фильтром проблем не возникает, но как синхронизировать несколько (например, пользователь, событие и выбранный интервал даты), чтобы отображаемый список уменьшался по мере выбора новых фильтров.

const items = [
    {
        id: "1",
        status: 100,
        event: "Открытие двери",
        user: 'Константин',
        user_pic: '../img/user.png',
        created_at:  '2020-09-01T12:31',
    },

    {
        id: "2",
        status: 200,
        event: "Вызов в домофон",
        user: 'Константин',
        user_pic: '../img/user.png',
        created_at:  '2020-09-01T12:30',
    },

    {
        id: "3",
        status: 300,
        event: "Звонок",
        user: 'Антонина',
        user_pic: '../img/user.png',
        created_at:  '2020-08-03T18:30',
    },

    {
        id: "4",
        status: 400,
        event: "Срабатывание сигнализации",
        user: 'Олег',
        user_pic: '../img/user.png',
        created_at:  '2020-07-28T10:40',
    },
]

Answer 1

[coderisimo]

Как всегда - общая идея реализации. Можно добавить столько фильтров сколь нужно. Все они работают в связке. Каждый элемент проходит сквозь "сито" установленных фильтров. Если он удовлетворяет критериям отбора - оказывается в результирующей выборке.

Answer 2

[Karpion]

Слово "синхронизировать" здесь неуместно.

Я так понял, Вам надо искать элементы массива, которые удовлетворяют сразу всем условиям. Т.е. надо объединить условия оператором "и".

Как Вы вообще ищете по массиву?

Comments

[alexnem]

ну да, "синхронизировать" может надо было в кавычках написать, не знаю как по-другому описать нужно действие. Оператор 'и' не подходит, потому что условий может быть много и вручную это описывать не вариант.

С одним условием фильтрую через users.filter()

[Karpion]

Покажите мне, как именно Вы фильтруете - что подаёте в функцию users.filter(). Или она только по юзерам фмиильтрует?

Напишите функцию, которая внутри себя гоняет цикл по всем условиям. И фильтруйте по срабатыванию этой функции.

Или так:

1. фильтруем по первому условию, результат скидываем в массив;
   
2. этот массив фильтруем по второму условию, результат скидываем во второй массив;
   
3. и так далее.
   

Только надо сделать так, чтобы массивы не накапливались - надо обойтись двумя массивами. Т.е. третья фильтрация должна скидывать не в третий массив, а в первый. А потом снова во второй.

Answer 3

[Steppp]

С инпутами думаю сам допилишь! Там не сложно)))
А со временем, лень конвертировать))) в unix и обратно, хотя можно и без конвертации попробовать))) Не было практики)

const items = [
  {
      id: "1",
      status: 100,
      event: "Открытие двери",
      user: 'Константин',
      user_pic: '../img/user.png',
      created_at:  '2020-09-01T12:31',
  },

  {
      id: "2",
      status: 200,
      event: "Вызов в домофон",
      user: 'Константин',
      user_pic: '../img/user.png',
      created_at:  '2020-09-01T12:30',
  },

  {
      id: "3",
      status: 300,
      event: "Звонок",
      user: 'Антонина',
      user_pic: '../img/user.png',
      created_at:  '2020-08-03T18:30',
  },

  {
      id: "4",
      status: 400,
      event: "Срабатывание сигнализации",
      user: 'Олег',
      user_pic: '../img/user.png',
      created_at:  '2020-07-28T10:40',
  },

  {
      id: "5",
      status: 100,
      event: "Срабатывание сигнализации",
      user: 'Олег',
      user_pic: '../img/user.png',
      created_at:  '2020-07-28T10:40',
  },

  {
      id: "6",
      status: 100,
      event: "Срабатывание сигнализации",
      user: 'Олег',
      user_pic: '../img/user.png',
      created_at:  '2020-07-28T10:40',
  },

  {
      id: "7",
      status: 300,
      event: "Срабатывание сигнализации",
      user: 'Олег',
      user_pic: '../img/user.png',
      created_at:  '2020-07-28T10:40',
  },
];

let filterid = [];
  items.forEach(el => {
      if (el.id > 4) {
        filterid.push(el);
      }
    
});

let filterStatus = [];
filterid.forEach(el => {
    if (el.status === 100) {
      filterStatus.push(el);
    }
});

console.log(...filterStatus);

Answer 4

[Антон Шаманов]

разбиваем массив: отображаемые и многомерный массив отфильтрованных значений. соответственно вначале все значения в списке отображаемые, по мере применения фильтров переносим значения в отфильтрованные, при смене значения фильтра возвращаем отфильтрованные значения и фильтруем по новой