Javascript 尝试在单击时使用筛选器数组筛选产品数组
我想根据用户选择的过滤器筛选产品列表。例如: 以下是产品列表:Javascript 尝试在单击时使用筛选器数组筛选产品数组,javascript,arrays,Javascript,Arrays,我想根据用户选择的过滤器筛选产品列表。例如: 以下是产品列表: 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=1
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: ['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: ['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: ['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: ['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 filtered = ['classy', 'berries', 'juicy']
如何筛选产品列表以在其数组属性的类型中显示所有具有此类型的产品?因此,如果用户单击一个,它将过滤一个,依此类推。我们可以使用,并找到与过滤阵列匹配的产品
对于每个产品,我们检查product.type数组和筛选数组是否重叠:
const products=[{id:1,产品名称:'草莓罗勒',productImgURL:'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Cherry_Pop_Still_4K_Front-CherryPop.png?v=1588713373,类型:['berry','citrusy','fancy',价格:5.5,},{id:2,产品名称:'酸蓝莓',产品说明:'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/SourBlueBerry_Still_4K_Front-SourBlueberry.png?v=1588713584,类型:['sour','berry',价格:4,},{id:3,产品名称:'Blackberry Jam',产品说明:'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/BlackBerry_Jam_Still_4K_Front-BlackberryJam.png?v=1595035965,类型:['berry',价格:10,},{id:4,产品名称:'橙色油桃',产品名称:'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Orange_Nectarine_Still_4K_Front-OrangeNectarine.png?v=1588713522,类型:['citrus','fancy','juicy',],价格:6,},{id:5,productName:'柠檬马鞭草',productImgURL:'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/Lemon_Verbena_Still_4K_Front-LemonVerbena.png?v=1588713474,类型:['citrus','classic','floral',价格:4.5,},{id:6,产品名称:'Extra Peach',productImgURL:'https://cdn.shopify.com/s/files/1/0274/3641/7123/products/ExtraPeach_Still_4K_Front-ExtraPeach.png?v=1588713411,类型:['juicy',价格:8.5,}]
const filtered=['classy','berries','juicy'];
const results=products.filterproduct=>{
return product.type.someproductType=>filtered.includeProductType
}
console.log`Matching products${results.length}:`,results.map{productName}=>productName;您尝试了什么?您尝试过.filter、?