Vue Computed Method - looking for values in array doesn't work

Question

I have a Vue page to display recipes by category:

<template>
  <div class="recipes-page">
    <div class="recipes" v-for="r in categoryRecipes" :key="r.id">
      <span>{{ r.title }}</span>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    loadedRecipes() {
      return this.$store.getters.loadedRecipes;
    },
    loadedCategories() {
      return this.$store.getters['categories/loadedCategories'];
    },
    categoryRecipes() {
      let categorized = [];
      this.$store.getters['categories/loadedCategories'].forEach(cat => {
        this.$store.getters.loadedRecipes.forEach(recipe => {
          if (cat.id in Object.keys(recipe.categories)) { // doesnt work
            console.log("Recipe has the category with id: " + cat.id);
            categorized.push(recipe);
          }
        });
      });
      return categorized;
    }
  }
};
</script>

In the data structure we have categories and recipes:

Categories:

[                                                                                                                                              
  {
    name: 'Juices',
    recipes: {
      '-L_Pg_BbwMYaGQjI2ejd': true
    },
    id: 'juices'
  },
  {
    name: 'Misc',
    recipes: {
      '-L_Pg_BbwMYaGQjI2ejd': true,
      '-L_PjcLaCvhZr9nb6wbh': true
    },
    id: 'misc'
  }
]

Recipes:

[                                                                                                                                              
  {
    author: 'Ian K',
    categories: {
      juices: true,
      misc: true
    },
    citation: 'none',
    cookTime: 'n/a',
    created: '2019-03-08T00:27:09.774Z',
    description: 'How to make Orange Juice from frozen concentrate.',
    directions: 'Mix frozen orange juice and water in a pitcher.',
    featured: true,
    id: '-L_Pg_BbwMYaGQjI2ejd',
    prepTime: '1 min',
    starCount: 5,
    thumbnail: 'https://baconmockup.com/420/420',
    title: 'Orange Juice from Concentrate',
    totalTime: '1 min',
    updated: '2019-03-08T00:27:09.774Z',
    yield: '8 Cups'
  },

  ...
]

The problem is that the if statement never returns true, even though the cat.id does exist in the recipe categories keys. Does anyone know why checking the keys array contents does not work?

I'd also like to know if chaining iteration like this will have a negative performance impact, and if there is a better/more convenient way to go about it?

Hard to say much since you haven't shown the data structure, but from the name, might it be that recipe.categories is an array and not an object? — Stephen Thomas
– Stephen Thomas, Commented Mar 12, 2019 at 19:17
What is cat.id value? Because Object.keys(recipe.categories) returns a list with strings but it looks like you would want to test the values — Matheus Valenza
– Matheus Valenza, Commented Mar 12, 2019 at 19:17
Did you try if (recipe.categories[cat.id]) { ... }. if the recipe id is property name for recipe.categories object, then this is the fastest way to do it, performance wise. — Teddy
– Teddy, Commented Mar 12, 2019 at 19:22
@Teddy's solution worked, although Stephen Thomas's answer works as well, the original question also asked how to make it perform better. I will post my new code with Teddy's solution as it seems to be the better answer. — IanK.CO
– IanK.CO, Commented Mar 12, 2019 at 19:53

Stephen Thomas · Accepted Answer · 2019-03-12 19:19:18Z

1

Since Object.keys() returns an array, you probably want something like

if (Object.keys(recipe.categories).includes(cat.id)) {

answered Mar 12, 2019 at 19:19

Stephen Thomas

14.1k2 gold badges35 silver badges53 bronze badges

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

Comments

Teddy · Accepted Answer · 2019-03-12 20:00:39Z

0

Use

if (recipe.categories[cat.id]) { 
  // ...
}

This is the fastest way as it doesn't iterate through each category for each recipe.

answered Mar 12, 2019 at 20:00

Teddy

3045 silver badges17 bronze badges

1 Comment

Stephen Thomas Over a year ago

Works as long as recipe.categories[] isn't 0 or "", which is presumably a safe bet in this case.

Collectives™ on Stack Overflow

Vue Computed Method - looking for values in array doesn't work

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related