将数组过滤成数组答案

【问题标题】：Filter in Array into Array将数组过滤成数组
【发布时间】：2020-10-21 20:34:51
【问题描述】：

我有一个这样的对象数组：

data() {
  return {
    searchVariant: null,
    variantList: ["red", "green", "blue"],
    products: [
      {
        id: 1,
        title: "adipisicing elit.",
        description: "ipsa deleniti.",
        variants: [
          { id: 1, color: "red", size: "xl", price: 150, inStock: 150 },
          { id: 2, color: "blue", size: "xl", price: 46, inStock: 4 },
          { id: 3, color: "gray", size: "sm", price: 50, inStock: 50 },
        ],
      },
      {
        id: 2,
        title: "amet consecteturt.",
        description: "id quas perspiciatis deserunt.",
        variants: [
          { id: 1, color: "red", size: "xl", price: 150, inStock: 150 },
          { id: 2, color: "blue", size: "xl", price: 46, inStock: 4 },
          { id: 3, color: "green", size: "sm", price: 50, inStock: 50 },
        ],
      },
    ],
  };
}

虽然我将在选择选项中选择像green 这样的变体，但第 2 行将显示在表格搜索列表中。

我正在使用 Vuejs 来执行此操作：

queryResults() {
   if(this.searchVariant) {
       return this.products.filter((item)=> {
          return item.variants.filter((variant) => {
             return this.searchVariant.toLowerCase().split(' ').every(v => variant.color.toLowerCase().includes(v))
            })
          })
   }
   else{
    return this.products;
   }
}

【问题讨论】：

标签： javascript vue.js filter

【解决方案1】：

您只需要检查数组中的每个对象是否都有some 变体，其颜色与您的搜索匹配：

const products = [
  {
     id: 1, 
     title: 'adipisicing elit.',
     description: 'ipsa deleniti.',
     variants: [
        {id: 1, color: 'red', size: 'xl', price: 150, inStock: 150},
        {id: 2, color: 'blue', size: 'xl', price: 46, inStock: 4},
        {id: 3, color: 'gray', size: 'sm', price: 50, inStock: 50}
     ]
  },
  {
    id: 2, 
    title: 'amet consecteturt.',
    description: 'id quas perspiciatis deserunt.',
    variants: [
        {id: 1, color: 'red', size: 'xl', price: 150, inStock: 150},
        {id: 2, color: 'blue', size: 'xl', price: 46, inStock: 4},
        {id: 3, color: 'green', size: 'sm', price: 50, inStock: 50}
    ]
 }
];
const searchVariant = 'green';

const result = products.filter(item =>
  item.variants.some(variant =>
    searchVariant.toLowerCase().includes(variant.color)
  )
);

console.log(result);

【讨论】：

【解决方案2】：

你可以试试这样的

queryResults() {
 if(this.searchVariant) {
   return this.products.filter((item)=> {
     item.variants.some(variant => 
      variant.color.toLowerCase() === searchVariant.toLowerCase())   
   }
 }
 else{
  return this.products;
 }
}

【讨论】：