Совет по JavaScript: фильтрация объекта по значению, содержащемуся в массиве внутри
Звучит странно, но иногда вам нужно отфильтровать объект по некоторому значению, содержащемуся в массиве в его свойствах. Проверьте один простой способ решить эту проблему.
Допустим, у вас есть веб-сайт «Журналы и газеты», на котором продаются подписки. И вы разрабатываете страницу подписки для повышения уровня, на которой вы будете показывать все платные планы, которые предлагает ваша компания.
Это должно быть так же просто, как вызвать вашу конечную точку с информацией о подписках и нарисовать ее с помощью функции map()
и некоторых .jsx
. Но… что, если ответ вернет дополнительную информацию, которая вам на самом деле не нужна?
Пришло время сделать небольшую уборку. Фильтрация часто довольно проста с filter()
функциями JavaScript ES6. Но это работает только с массивами.
В нашем случае наш API возвращает объект с различными предлагаемыми нами продуктами. Каждый продукт имеет набор свойств, описывающих различные доступные варианты подписки или подписки. Нравится:
{ cool_magazine: [ { id: 'free-pass', label: 'Free Pass' }, { id: 'seasons-pass', label: 'Seasons Pass' } ], boring_newspaper: [ { id: 'free-pass', label: 'Free Pass' }, { id: 'seasons-pass', label: 'Seasons Pass' } ] };
Нам нужно избавиться от этих «бесплатных» подписок в массивах свойств каждого объекта. Звучит как много вложенности, и это так! Но давайте создадим функцию, которая возвращает уже отфильтрованный объект, который мы можем отобразить на нашем веб-сайте:
Давайте разберем это:
- Давайте создадим новый чистый объект, который будет содержать окончательные результаты очистки. Для этого мы реплицируем исходную структуру объекта, используя
Object.assign()
. Это создаст точную копиюproductPass
, но все значения будут пустыми. - Нам нужно перебрать все реквизиты нашего исходного объекта продуктов, чтобы выполнить некоторые действия. Но поскольку объекты не являются итерируемыми, нам нужно сделать итератор с
Object.keys()
. Эта функция виртуально создаст массив с ключами нашего объекта:['cool_magazine', 'boring_newspaper']
что позволит нам использовать методы массива, которые есть в JS. - Теперь, когда у нас есть массив, мы пройдемся по каждому ключу с помощью метода
forEach()
. - Поскольку наш
key
соответствует названию продукта как вnewData
, так и вproductPass
, мы можем использовать его, чтобы напрямую найти массив свойств каждого продукта сfilter()
. - Наконец, мы можем отфильтровать массив внутри каждого продукта и извлечь только те, которые не содержат слова «бесплатно». Обычная старая функция
includes()
здесь.
Итак, когда эта функция запущена и работает, вам просто нужно обработать свой объект, ответ JSON или API, прежде чем использовать его или сохранить в своем магазине Redux.
Большой привет и спасибо Miguel A Gutiérrez, который был большим умом, стоящим за этим простым, но сложным решением.
Мир и код
Надин