dpereverza Mar 11 2020 at 13:15

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

7 min

8.5K

Open source*JavaScript*Programming*TypeScript*

Comments 12

reforms Mar 11 2020 at 15:46

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

// Человеко читаемый фильтр по пользователям
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 Mar 11 2020 at 15:54

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

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

Пример

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

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

reforms Mar 11 2020 at 16:15

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

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

dpereverza Mar 11 2020 at 16:23

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

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

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

xonix Mar 11 2020 at 17:50

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

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

savostin Mar 12 2020 at 13:18

Еще есть Crossfilter

dpereverza Mar 12 2020 at 13:39

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

Xambey Mar 12 2020 at 13:31

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

dpereverza Mar 12 2020 at 13:38

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

Xambey Mar 12 2020 at 13:45

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

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

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

dpereverza Mar 12 2020 at 13:53

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

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

whiteand Apr 13 2020 at 16:58

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

То мы юзаем quartet:

import { v } from 'quartet'

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

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

Show the best of all time