ES6 / JS: поиск на вложенном объекте строки, возврат true - PullRequest
Новая
       8

ES6 / JS: поиск на вложенном объекте строки, возврат true

0 голосов
/ 18 января 2020

У меня есть таблица данных 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,
          }
        ]

    }
  ]

Я попытался (очень похоже на ладью ie) реализовать фильтр в строке 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 должна возвращать true, а record2 должна возвращать false.

1 Ответ

1 голос
/ 18 января 2020

Вы можете сделать это, используя функцию .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 = новый RegExp ("лед", "я") 

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
...