ES6/JS: Search nested object for string, return true

Question

I have a vuetify data-table I want to filter: https://codepen.io/rasenkantenstein/pen/MWYEvzK. I have filter containing a string, e.g. "Ice". Now I want to retrieve all records that contain an ingredient, which name contains ice.

[
    {

      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,
          }
        ]

    }
  ]

I have tried (very much like a rookie) to implement the filter on line 61.

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

The function filterIng already iterates each record (as is evident in the console). The "value" contains an array of objects, among one is called ingName.

When filtering "Ice" (ingFilterValue = "Ice"), both records should return true. In case of ingFilterValue = "Yog" only record 1 should return true and record2 should return false.

Make sure both values are similarly capitalized. And also consider that your current comparison looks at the whole ingredient name... — tehhowch
– tehhowch, Commented Jan 18, 2020 at 13:15
Thank you. I have changed the one line to return x.ingName.toUpperCase() === this.ingFilterValue.toUpperCase()}. Also, the filter-method returns an object, I would need to return a boolean. I assume I am somewhat using a wrong method whatsoever. — rasenkantenstein
– rasenkantenstein, Commented Jan 18, 2020 at 13:24

Mikkel · Accepted Answer · 2020-01-18 13:50:01Z

1

You can do it using the .filter() function, iterating first through the recipes, and then through the ingredients, looking for matches like this

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

// You can also create this with 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

answered Jan 18, 2020 at 13:50

Mikkel

7,7773 gold badges20 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rasenkantenstein Over a year ago

Perfect. This is the result: filterIng (value) { if (!this.ingFilterValue) { return true; } const regex = new RegExp(this.ingFilterValue,"i") const ingredients = value.filter(ing => ing.ingName.match(regex)) return ingredients.length > 0

Collectives™ on Stack Overflow

ES6/JS: Search nested object for string, return true

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related