Vue / Lodash filter Array by another array's values

Question

I'm continuing my JavaScript learning and I've come across something that isn't clear to me to work around.

In my Vue data object I have:

  data: {
    allergenFilter: [],
    categoryFilter: [],
    results: {},
  },

I have an array of checkboxes which allows me to select allergens for products, it populates my allergenFilter Vue property like this:

[
  0: "nut-free",
  1: "milk-free"
]

But I also have a list of allergens that a product has/doesn't have that I'd like to match the products that include the choices. This is an example from a product:

[
  0:"vegetarian"
  1:"vegan"
  2:"egg-free"
  3:"nut-free"
]

I've tried to filter the results by doing this:

  this.results.filter(result =>
    result.allergens.includes(
      this.allergenFilter
    )
  )

But it doesn't work because of the key:value pairings, so I know the issue, but I'm not entirely sure of how to see if an arrays values are included in another array's values

CertainPerformance · Accepted Answer · 2021-09-04 14:10:37Z

1

You need another nested loop - check if .some of the allergens are included in the allergenFilter.

this.results.filter(result =>
    result.allergens.some(
        allergen => this.allergenFilter.includes(allergen)
    )
)

If you need all of the allergenFilter to be included, then use .every.

this.results.filter(result =>
    this.allergenFilter.every(
        allergen => result.allergens.includes(allergen)
    )
);

answered Sep 4, 2021 at 14:10

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

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

6 Comments

Andy Holmes Over a year ago

.every works really well, thank you so much. Though I do seem to get a some() is not a function error when I use your first answer

CertainPerformance Over a year ago

Is result.allergens an array? If so, it should work. Your code has [ 0: "nut-free", 1: "milk-free" ] which is invalid syntax but looks kind of like an array. Array literals don't have key-value pairs, only values, and Array.prototype.some exists.

Andy Holmes Over a year ago

It is yeah, key value pairs. If I copy your second answer and change every to some it works so not sure if there is a genuine syntax error in the first one?

Andy Holmes Over a year ago

.every is the answer I needed for sure, but just an FYI on the .some answer

CertainPerformance Over a year ago

Yes, your code of [ 0: "nut-free", 1: "milk-free" ] is definitely a syntax error, just try it: const someArr = [ 0: "nut-free", 1: "milk-free" ] will throw

|

Collectives™ on Stack Overflow

Vue / Lodash filter Array by another array's values

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related