Совет по 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'
        }
      ]
 };

Нам нужно избавиться от этих «бесплатных» подписок в массивах свойств каждого объекта. Звучит как много вложенности, и это так! Но давайте создадим функцию, которая возвращает уже отфильтрованный объект, который мы можем отобразить на нашем веб-сайте:

Давайте разберем это:

  1. Давайте создадим новый чистый объект, который будет содержать окончательные результаты очистки. Для этого мы реплицируем исходную структуру объекта, используя Object.assign(). Это создаст точную копию productPass, но все значения будут пустыми.
  2. Нам нужно перебрать все реквизиты нашего исходного объекта продуктов, чтобы выполнить некоторые действия. Но поскольку объекты не являются итерируемыми, нам нужно сделать итератор с Object.keys(). Эта функция виртуально создаст массив с ключами нашего объекта: ['cool_magazine', 'boring_newspaper'] что позволит нам использовать методы массива, которые есть в JS.
  3. Теперь, когда у нас есть массив, мы пройдемся по каждому ключу с помощью метода forEach().
  4. Поскольку наш key соответствует названию продукта как в newData, так и в productPass, мы можем использовать его, чтобы напрямую найти массив свойств каждого продукта с filter().
  5. Наконец, мы можем отфильтровать массив внутри каждого продукта и извлечь только те, которые не содержат слова «бесплатно». Обычная старая функция includes() здесь.

Итак, когда эта функция запущена и работает, вам просто нужно обработать свой объект, ответ JSON или API, прежде чем использовать его или сохранить в своем магазине Redux.

Большой привет и спасибо Miguel A Gutiérrez, который был большим умом, стоящим за этим простым, но сложным решением.

Мир и код

Надин