Как отфильтровать массив, элементы которого имеют вложенный массив?

Я пытаюсь найти логику, позволяющую фильтровать массив, содержащий другой массив в свойстве. См. ниже:

let filterValue = 'berries'; 

const products = [
    {
        id: 1,
        productName: 'Strawberry Basil',
        productImgURL:
            'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Cherry_Pop_Still_4K_Front-CherryPop.png?v=1588713373',
        type: ['berry', 'citrusy', 'fancy'],
        price: 5.5,
    },
    {
        id: 2,
        productName: 'Sour Blueberry',
        productImgURL:
            'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/SourBlueBerry_Still_4K_Front-SourBlueberry.png?v=1588713584',
        type: ['all', 'sour', 'berry'],
        price: 4,
    },
    {
        id: 3,
        productName: 'Blackberry Jam',
        productImgURL:
            'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/BlackBerry_Jam_Still_4K_Front-BlackberryJam.png?v=1595035965',
        type: ['all', 'berry'],
        price: 10,
    },
    {
        id: 4,
        productName: 'Orange Nectarine',
        productImgURL:
            'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Orange_Nectarine_Still_4K_Front-OrangeNectarine.png?v=1588713522',
        type: ['all', 'Citrus', 'fancy', 'juicy'],
        price: 6,
    },
    {
        id: 5,
        productName: 'Lemon Verbena',
        productImgURL:
            'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Lemon_Verbena_Still_4K_Front-LemonVerbena.png?v=1588713474',
        type: ['all', 'Citrus', 'classic', 'floral'],
        price: 4.5,
    },
    {
        id: 6,
        productName: 'Extra Peach',
        productImgURL:
            'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/ExtraPeach_Still_4K_Front-ExtraPeach.png?v=1588713411',
        type: ['Juicy'],
        price: 8.5,
    },
];

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

javascript

10.12.2020 12:21

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

const filteredProducts = products.filter(p => p.type.includes(type));

Вы можете использовать .filter во внешнем массиве и .includes во внутреннем массиве, чтобы делать то, что вы ищете.

Для справки, «ягоды» никогда не появляются ни в одном из массивов «типов», но «ягоды» есть.

И вы также можете сделать чек на all. Было бы const filteredProducts = products.filter(p => p.type.includes( filterType ) || p.type.includes('all'));

— 10.12.2020 12:26

Спасибо! это был выборочный массив, а не все товары! :)

— 10.12.2020 12:56

10.12.2020 12:24

Вы можете использовать Array.prototype.filter() с Array.prototype.some() для получения отфильтрованного результата. Метод some() возвращает true, если хотя бы один элемент в массиве проходит проверку заданной функцией обратного вызова.

const filterValue = 'berry';

const products = [
  {
    id: 1,
    productName: 'Strawberry Basil',
    productImgURL:
      'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Cherry_Pop_Still_4K_Front-CherryPop.png?v=1588713373',
    type: ['berry', 'citrusy', 'fancy'],
    price: 5.5,
  },
  {
    id: 2,
    productName: 'Sour Blueberry',
    productImgURL:
      'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/SourBlueBerry_Still_4K_Front-SourBlueberry.png?v=1588713584',
    type: ['all', 'sour', 'berry'],
    price: 4,
  },
  {
    id: 3,
    productName: 'Blackberry Jam',
    productImgURL:
      'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/BlackBerry_Jam_Still_4K_Front-BlackberryJam.png?v=1595035965',
    type: ['all', 'berry'],
    price: 10,
  },
  {
    id: 4,
    productName: 'Orange Nectarine',
    productImgURL:
      'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Orange_Nectarine_Still_4K_Front-OrangeNectarine.png?v=1588713522',
    type: ['all', 'Citrus', 'fancy', 'juicy'],
    price: 6,
  },
  {
    id: 5,
    productName: 'Lemon Verbena',
    productImgURL:
      'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Lemon_Verbena_Still_4K_Front-LemonVerbena.png?v=1588713474',
    type: ['all', 'Citrus', 'classic', 'floral'],
    price: 4.5,
  },
  {
    id: 6,
    productName: 'Extra Peach',
    productImgURL:
      'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/ExtraPeach_Still_4K_Front-ExtraPeach.png?v=1588713411',
    type: ['Juicy'],
    price: 8.5,
  },
];

const ret = products.filter(({ type }) =>
  type.some((x) => x.toLowerCase() === filterValue.toLowerCase())
);
console.info(ret);

10.12.2020 12:54

Другие вопросы по теме

Я хочу удалить некоторые символы из строки в js

Отформатировать буфер ввода телефона, не могу удалить вставленные данные

Сброс состояний редукции при изменении URL-адреса

Отображение таймера сеанса Java-скрипта для нескольких вкладок

Как мне проверить полный формат строки, используя регулярное выражение в JavaScript?

Почему возникла ошибка Invalid_Key из API метаданных MailChimp?

Отдельное событие onClick для родительского и дочернего элементов

Получение ошибки: Uncaught SyntaxError: JSON.parse: неожиданный символ в строке 3 столбца 1 данных JSON - в этом почти действительном коде

Фактическое значение хука reactJS useState устарело в асинхронных обещаниях

Дублирование дат на оси

Как отфильтровать массив, элементы которого имеют вложенный массив?

Ответы 2

Другие вопросы по теме

Похожие вопросы