Декларативная фильтрация данных на фронте. JS/TS

[reforms]

А что думаете по поводу шаблонных языков в качестве фильтров для поиска и решения Вашей проблемы? Для указанных в статье данных это могло бы выглядеть так:

// Человеко читаемый фильтр по пользователям
const usersFilter = `$age == 23 AND $name CONTAINS 'mary'`;
const filteredUsers = yourLib.filter(users, usersFilter);

// Человеко читаемый фильтр по группам
const groupFilter = "$list.name CONTAINS 'Li' OR $groups.groups.list.name CONTAINS 'Li'";
const filteredGroups = yourLib.filter(groups, groupFilter);

// Можно заменить константы, например, через template строку
const userFilters2 = `$age == ${filterValue.age} AND $name CONTAINS '${filterValue.searchText}'`;

[dpereverza]

Можно и так сделать, но тогда написание собственных правил намного усложняется.

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

Пример

const element = {
    attributes: [
      {
        name: "attribute1",
      },
      {
        name: "attribute2",
      },
    ],
  }; 
const filter = {
    attribute: {
      name: "attribute1",
    },
  };

someInArray(
    elementField("attributes"),
    equalProp(filterField("attribute.name"), elementField("name")),
)

[reforms]

По всей видимости я упускаю вашу мысль насчет сложных объектов, но разве это не решается таким образом:

const attrsFilter = `$attributes.name == ${filter.attribute.name}`;

[dpereverza]

Ну, тут явно не указано массив attributes или нет. И откуда появился $attributes?

Вообще, мне нравится эта идея. Можно перевести правила на новый язык запросов. Но этот язык запросов нужно будет изучать отдельно.

На мой взгляд, функции проще и привычнее.

[xonix]

Ha Jsqry аналог первого примера будет так:

jsqry.query(users, 
            '[_.age===? && _.name.toLowerCase().indexOf(?)>=0]',
            filterValue.age, 
            filterValue.searchText)

[savostin]

Еще есть Crossfilter

[dpereverza]

тоже видел, мне код показался не очень читаемым.

[Xambey]

Предпочитаю писать фильтрацию и сортировку в ручную под потребности, на основе Rx.js. Ни одна библиотека не даст такой гибкости

[dpereverza]

А можете пример привести? rx.js про управление потоками же

[Xambey]

Rx.js про управление потоками данных. При использовании можно превратить в "поток" любые данных. Например of([...]). Потом на этот поток можно навесить кучу операторов:

var someDataObservable = of([...]).pipe(
map(...),
switchMap(...),
filter(...),
scan(...)
) 
...
someDataObservable.pipe(...someAdditionalOperators).subscribe(data => {...})

Операторов очень много и их хватает на все случаи жизни. Также можно создавать кастомные операторы работы с данными. Во все времена и на мой взгляд все еще, rx js предоставляет большие возможности и гибкость по управлению данными, чем например Es Promises.

[dpereverza]

Rx не про манипуляцию данными на месте.
Все мощь Rx проявляется в ситуациях когда данные к нам приходят в разные моменты времени, и мы можем описать то как они должны взаимодействовать.

Для фильтрации в приведенном коде нам больше всего понадобится функция map. А внутри уже Ramda тогда. Там тоже есть и pipe и compose

[whiteand]

У нас часто происходит фильтрация месседжей в WebSocket'aх. Но там чаще всего нам нужно сравнивать некоторые поля на полное равенство с определёнными значениями.

То мы юзаем quartet:

import { v } from 'quartet'

const isNotificationMessage = v({
  channel: 'notification-channel',
  text: v.string
})

Websocket.subscribe(message => {
  if (isNotificationMessage(message)) {
     handleNotification(message)
  }
})