Level 20
first, I would test that I'm starting with what I think I'm starting with.
Just before this.categories.forEach(function(categoryObj){, I would console.log(this.categories).
Then check it in the console after the first and second click.
Feb 20, 2017
4
Level 7
Getting Empty result while calling the same function in the 2nd time
Hi everyone,
I am attempting to filter a collection of data object in vue based on the user choice. for the first click it is working, but if i click again / in the different checkbox, all of the products are empty. can anyone please tell me what am i doing wrong? here is what i have done so far:
// Example dataset
categories:Array[5]
0:Object
id:11
name:"Gage"
products:Array[1]
0:Object
made_in:1
allergies:Array[1]
0:Object
id:1
name:"chicken"
pivot:Object
category_id:11
code:"7304"
brand:"Altenwerth PLC"
food_form_id:1
id:1
description:"Rerum atque perspiciatis dolores commodi unde qui dolorem est. Sequi pariatur nam pariatur dolorem quia. Omnis repellendus in accusantium nostrum magnam."
created_at:"2017-02-16 04:41:13"
deleted_at:null
creator_id:1
ingredients:"Minus ad possimus quod tempore explicabo. Qui soluta sed minima omnis eos debitis ex. Sint ut cum veritatis magni. Et odit nam voluptatem est."
is_addon:0
name:"Luella Howell"
product_images:Object
product_status_id:11
proper_price:"7008.00"
updated_at:"2017-02-16 04:41:13"
weight:"3"
---- continues the same structure repeat until the 5th items in array
filterByAllergy(id){
var $this = this;
this.filteredCategories = [];
this.categories.forEach(function(categoryObj){
var filteredProducts = [];
categoryObj.products.forEach(function( product ){
var allergyIds = [];
product.allergies.forEach(function(allergy){
allergyIds.push(allergy.id);
});
if(allergyIds.includes(id)){
filteredProducts.push(product);
}
});
$this.filteredCategories.push(categoryObj);
$this.filteredCategories[$this.filteredCategories.indexOf(categoryObj)].products = [];
$this.filteredCategories[$this.filteredCategories.indexOf(categoryObj)].products = filteredProducts;
});
}
I am calling this function from a checkbox
<label @click="filterByAllergy(1)">
<input checked="" type="checkbox"> Chicken
</label>
<label @click="filterByAllergy(2)">
<input checked="" type="checkbox"> Turkey
</label>
Can anyone please help...
With Thanks, Fahad
Level 7
@clay Thanks a lot for your suggestion, I have used the console to check as well, it provides the product with an array which has the allergy-id on first click and in the next click( if i pass another id by clicking another checkbox) it returns empty [] in products. but a product that has the "passed id" is in the "this.categories" object.
Now what i am really suffering to understand is:
I am emptying and refilling the this.filteredCategories whenever a click event occours, but it doesn't seem to work( meaning refilling )
Level 7
Update:
$this.filteredCategories[$this.filteredCategories.indexOf(categoryObj)].products = [];
$this.filteredCategories[$this.filteredCategories.indexOf(categoryObj)].products = filteredProducts;
I have figured that these two lines of code is in-fact overriding the this.categories values as well( the reference array), but I want to keep
this.categories as untouched
and this.filteredCategories to be changed as per the passed id
so that i can use this.categories value again to make/ re-populate the this.filteredCategories variable
Where to change in my code, can anyone please help...........
Level 7
As an inexperienced guy in javascript i was expecting the array works as php( clone copy evertime if i assign to a new variable), but in javascript it is not the case, it will still keep the reference to the original one. to make a clone copy of an array, i should use:
JSON.parse(JSON.stringify(categoryObj))
and i have now changed my code to the following and it works::
filterByAllergy(id){
var $this = this;
this.filteredCategories = [];
this.categories.forEach(function(categoryObj){
var filteredProducts = [];
var dupCatObj = JSON.parse(JSON.stringify(categoryObj));
dupCatObj.products.forEach(function( product ){
var allergyIds = [];
product.allergies.forEach(function(allergy){
allergyIds.push(allergy.id);
});
if(allergyIds.includes(id)){
filteredProducts.push(product);
}
});
dupCatObj.products = filteredProducts;
$this.filteredCategories.push(dupCatObj);
});
}
Please or to participate in this conversation.