how to check if a specific data is present in an array using Vue

Question

how to check if a specific data is present in an array using Vue

I am working with two arrays of data:

checked: [
'orange', 'apple', 'juice'
]

and the second array:

products: [
 '0': {
    title: 'this is product title',
    categories: [
     'apple', 'juice'
    ]
  }
]

I am trying to filter the data using a computed property with a checkbox.

Here is what I have tried so far:

computed: {
   filterProducts(){
       return this.products.filter(product => this.checked.includes(product.categories));
   }
}

However, the filter is not working as expected. Can anyone provide guidance on how to make this work?

javascript arrays vue.js vuejs2

Answer 1

Answer №1

If you're looking to accomplish this task, utilizing the .every() method is recommended.

Consider the following example:

checked = [
  'orange', 'apple', 'juice'
]

products = [{
  title: 'this is product title',
  categories: [
    'apple', 'juice'
  ]
}];

const filteredProducts = products.filter(({ categories }) => categories.every(cat => checked.includes(cat)));

console.log(filteredProducts);

With this code, you'll obtain an array of products that possess a categories array containing all its values present in the checked array.

If you're seeking to retrieve products with a categories array that consists of at least one value found in the checked array, opting for .some() instead of .every() would be more appropriate.

Answer 2

If you're looking to accomplish this task, utilizing the .every() method is recommended.

Consider the following example:

checked = [
  'orange', 'apple', 'juice'
]

products = [{
  title: 'this is product title',
  categories: [
    'apple', 'juice'
  ]
}];

const filteredProducts = products.filter(({ categories }) => categories.every(cat => checked.includes(cat)));

console.log(filteredProducts);

With this code, you'll obtain an array of products that possess a categories array containing all its values present in the checked array.

If you're seeking to retrieve products with a categories array that consists of at least one value found in the checked array, opting for .some() instead of .every() would be more appropriate.

Answer 3

Answer №2

To determine if all items in an array of strings are present in another array, instead of using the .includes() method, you can utilize the .every() method on the product.categories array and check if each item is included in the checked array:

const checked = ['orange', 'apple', 'juice'];

const products = [
  {
    title: 'this is product title',
    categories: ['apple', 'juice']
  }
];

const filteredProducts = products.filter(product => product.categories.every(item => checked.includes(item) || !checked.length));

console.log(filteredProducts);

Answer 4

To determine if all items in an array of strings are present in another array, instead of using the .includes() method, you can utilize the .every() method on the product.categories array and check if each item is included in the checked array:

const checked = ['orange', 'apple', 'juice'];

const products = [
  {
    title: 'this is product title',
    categories: ['apple', 'juice']
  }
];

const filteredProducts = products.filter(product => product.categories.every(item => checked.includes(item) || !checked.length));

console.log(filteredProducts);

how to check if a specific data is present in an array using Vue

Answer №1

Answer №2

Similar questions

Fixing Cross-Browser Issues with the OnScroll Function

Harnessing the Power of JSON in Rails to Enhance Your jQuery UI Autocomplete Form

Blur Event Triggered in Primefaces Editor

Loop through the AJAX response containing JSON data

What is the best way to tailor my functions to apply only to specific objects within an array, instead of affecting them all?

React Hamburger Menu not working as intended

Creating an automatic integer array ranging from 0 to 99: How it's done

Error occurs while running NPM script

Unable to find / DELETE Express.js

What is the designated color for highlighting an option in Next.js?

issue encountered when filling out a dropdown menu using a JSON data structure

Concealing a label for a certain range of values

What is the process for deploying a next.js application with a custom express backend to a VPS or Heroku platform?

Change the blue line to a crisp, clean white

The D3.extent() function is raising a TypeError because it is unable to iterate over the

The error message "Unexpected token var Node.js" means that there is a syntax error

Ways to make JavaScript cycle through a set of images

React/Ionic: Avoiding SVG rendering using <img/> elements

The proper way to cancel useEffect's Async in TypeScript

What is the significance of the ngf prefix within the context of AngularJS and ng-file-upload?