ES6/JS：在嵌套对象中搜索字符串，返回 true

Question

我有一个要过滤的 vuetify 数据表：https://codepen.io/rasenkantenstein/pen/MWYEvzK。我有一个包含字符串的过滤器，例如“冰”。现在我想检索所有包含一种成分的记录，该成分的名称包含冰。

[
    {

      name: 
      'Frozen Yogurt',
      calories: 159,
      fat: 6.0,
      carbs: 24,
      protein: 4.0,
      ingredients:
        [
          {
            ingName: 'Yogurt',
            ingMeasure: 'gramm',
            ingAmount: 100,
          },
          {
            ingName: 'Ice',
            ingMeasure: 'ml',
            ingAmount: 50,
          }
        ]

    },
    {

      name: 
      'Vanilla Ice Cream',
      calories: 100,
      fat: 2.0,
      carbs: 25,
      protein: 2.0,
      ingredients:
        [
          {
            ingName: 'Milk',
            ingMeasure: 'ml',
            ingAmount: 100,
          },
          {
            ingName: 'Vanilla Sugar',
            ingMeasure: 'g',
            ingAmount: 50,
          },
          {
            ingName: 'Ice',
            ingMeasure: 'g',
            ingAmount: 50,
          }
        ]

    }
  ]

我已经尝试（非常像一个菜鸟）在第 61 行实现过滤器。

filterIng (value) {
  console.log(value)
  if (!this.ingFilterValue) {
      return true;
  }
  value.filter(x => {return x.ingName === this.ingFilterValue})
}

函数 filterIng 已经迭代了每条记录（在控制台中很明显）。 “值”包含一个对象数组，其中一个称为 ingName。

过滤“Ice”时（ingFilterValue = “Ice”），两条记录都应返回 true。在 ingFilterValue = "Yog" 的情况下，只有记录 1 应该返回真，记录 2 应该返回假。

Answer 1

您可以使用.filter() 函数来完成，首先遍历食谱，然后遍历配料，寻找这样的匹配项

// Assumes allRecipes is your array of recipe objects, 
// and we are looking for "ice"

const regex = /ice/i   // Note the "i" makes it a case-insensitive search

// 你也可以用 regex = new RegExp("ice","i") 来创建它

const recipes = allRecipes.filter( recipe => {
  const ingredients = recipe.ingredients.filter(ing => ing.ingName.match(regex))
  return ingredients.length > 0  // True if any matches
})

//At this point `recipes` will contain the list of filtered recipes