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.

Answer 1

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

• Joel'-': 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: thanks! this was a sample of the array, not all the products! :)

Answer 2

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);