How to filter an array which elements have a nested array?

Question

I'm trying to find the logic to be able to filter an array that contains another array in a property. See below:

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,
    },
];

As you can see above, I want to filter the array and only show those products that contain the filter val inside the type. I have tried but my solution is really long.

TKoL · Accepted Answer · 2020-12-10 11:24:50Z

3

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

You can use .filter on the outer array and .includes on the inner array to do what you're looking for.

For the record, 'berries' never appears in any of the 'type' arrays, but 'berry' does

answered Dec 10, 2020 at 11:24

TKoL

13.9k4 gold badges49 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joel'-' Over a year ago

And you can also do the check for all. It would be const filteredProducts = products.filter(p => p.type.includes( filterType ) || p.type.includes('all'));

Carlos Escobar Over a year ago

thanks! this was a sample of the array, not all the products! :)

phi-rakib · Accepted Answer · 2020-12-10 12:19:06Z

You could use Array.prototype.filter() with Array.prototype.some() get the filtered result. The some() method returns true if at least one element in the array passes the test by the given callback function.

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.log(ret);

Collectives™ on Stack Overflow

How to filter an array which elements have a nested array?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related