Filter the array based on another array Vuejs

Question

I have two arrays

 {
"products": [
 {
 "name": "Jivi",
 "Hint": "45-60 IE/kg alle 5 Tage\n60 IE 1x/Woche\n30-40 IE 2 x/Woche",
 "frequency": ["1", "2", "8"]
 },
 {
 "name": "Adynovi",
 "Hint": "40-50 IE/kg 2x/Woche im Abstand von 3-4 Tagen",
 "frequency": ["2", "6", "7"]
 },
 {
 "name": "Esperoct",
 "Hint": "\"50 IE/kg \nalle 4 Tage\"\n",
 "frequency": ["7"]
 }
],
"haufigkeit" : [
 {
 "name": "1x / Woche",
 "id": 1,
 "value": 52.1428571429
 },
 {
 "name": "2x / Woche",
 "value": 104.2857142857143,
 "id": 2
 }
]
}

I have a select dropdown using Vuejs where the products.name are rendering.

 <select v-model="selectFrequency">
 <option v-for="(level1,index) in dataJson.products"
 v-bind:value="level1.frequency">{{level1.name}}</option>
 </select>

For example, When I select Jivi, I would like to compare the numbers in frequency of products with id in haufigkeit and when they matches, then display the name of haufigkeit

Here is what I am trying

computed:{
selectFrequency:function(){
 let results= this.haufigkeit.filter(array=>array.every(item => this.products.filter(group=>group.frequency.includes(item))));
}
}

I have been trying for two days and it gives me an error cannot read property 'every' of undefined. Can anyone suggest me where I have done mistake?

• featlorin: haufigkeit.filter(array=>array.every(item ... Inside the haufigkeit.filter function, array is an individual item from the array so it's an object with the keys name, value and id. By doing array.every you expect array to be an array but in fact it's not...

Answer 1

Edit: Ok now I understand, something like this should work for you: https://jsfiddle.net/q9grc04s/

If you select a product you will see it displays any haufigkeit that have an ID included in the selected frequency.

<template>
<div>
 <div>
 <select v-model="selectedFrequency">
 <option
 v-for="(level1, i) in products"
 :key="i"
 :value="level1.frequency"
 >
 {{level1.name}}
 </option>
 </select>
 </div>
 <div>
 <h1>Haufigkeit Matches:</h1>
 <ul v-if="haufigkeitMatches">
 <li v-for="match in haufigkeitMatches">{{ match.name }}</li>
 </ul>
 </div>
</div>
</template>
<script>
export default {
 data: {
 selectedFrequency: [],
 products: [
 {
 name: "Jivi",
 Hint: "45-60 IE/kg alle 5 Tage\n60 IE 1x/Woche\n30-40 IE 2 x/Woche",
 frequency: [1, 2, 8]
 },
 {
 name: "Adynovi",
 Hint: "40-50 IE/kg 2x/Woche im Abstand von 3-4 Tagen",
 frequency: [2, 6, 7]
 },
 {
 name: "Esperoct",
 Hint: "\"50 IE/kg \nalle 4 Tage\"\n",
 frequency: [7]
 }
 ],
 haufigkeit : [
 {
 name: "1x / Woche",
 id: 1,
 value: 52.1428571429
 },
 {
 name: "2x / Woche",
 value: 104.2857142857143,
 id: 2
 }
 ]
 },
 computed: {
 haufigkeitMatches(){
 return this.haufigkeit.filter(x => this.selectedFrequency.includes(x.id))
 }
 }
}
</script>

Note: sorry for all the edits, i'm trying to get to grips with the stackoverflow editor, the JS fiddle link is a working solution though.

• Sreenivasulu Gudipati: Hi, I have corrected my post., I am using this. and still I get the same error.
• Sreenivasulu Gudipati: Thats a great working solution. Thanks a lot... A small correction I need in your solution. Can I also use v-bind:value="level1" instead of v-bind:value="level1.frequency" in select the attritbute by changing the constant results to const results = this.haufigkeit.filter(x => this.selectedFrequency.frequency.includes(x.id)) like this? I want to do this because, at some point, I have to render Hint property also based on selected ````Jivi```.
• Sreenivasulu Gudipati: Yes! That has helped me a lot. I have tried this method already, But I have declared selectedProduct: [ ] instead of null which was throwing me error . Thank you very much.
• Nate: Happy to help :-)

Answer 2

You can use Javascript some function. in the below example I'm returning the id's of the haufigkeit array which are equal to the frequencies of the products

var data = {
 "products": [
 {
 "name": "Jivi",
 "Hint": "45-60 IE/kg alle 5 Tage\n60 IE 1x/Woche\n30-40 IE 2 x/Woche",
 "frequency": ["1", "2", "8"]
 },
 {
 "name": "Adynovi",
 "Hint": "40-50 IE/kg 2x/Woche im Abstand von 3-4 Tagen",
 "frequency": ["2", "6", "7"]
 },
 {
 "name": "Esperoct",
 "Hint": "\"50 IE/kg \nalle 4 Tage\"\n",
 "frequency": ["7"]
 }
 ],
 "haufigkeit" : [
 {
 "name": "1x / Woche",
 "id": 1,
 "value": 52.1428571429
 },
 {
 "name": "2x / Woche",
 "value": 104.2857142857143,
 "id": 2
 }
 ]
};
var result = [];
function selectFrequency(){
 data.products.forEach(elem => {
 
 elem.frequency.forEach(fre =>{
 var arr = data.haufigkeit;
 if(arr.some(arr => arr.id == fre))
 result.push(fre);
 })
 });
 return result;
}
console.log(selectFrequency());