I am using ion-select to select option and filter it but the issue is when I select one option its filtering fine but when i select second time its filter data from first filter result not from actual data
<ion-item >
<ion-label style="text-align: right;" dir="rtl" >קטגוריה</ion-label>
<ion-select dir="rtl" [(ngModel)]="selectedOption" (ionChange)="print()">
<ion-option *ngFor="let categ of cat2" dir="rtl" [value]="categ.id" >{{categ.title}}</ion-option>
</ion-select>
</ion-item>
print() {
console.log(this.selectedOption);
this.data = this.data.filter(category => category.categories[0].id === this.selectedOption);
}
this is just example data
{
{
"title": "111"
"category": "252"
},
{
"title": "111"
"category": "242"
},
{
"title": "111"
"category": "212"
},
{
"title": "111"
"category": "232"
}
}
when i select 232 category its showing 1 array because in data there is only 1 array which have category 232 . but on second time if i click 212 its showing nothing but there is value in data. Its filtering the first filter data.
Any solution how i can solve this ? i know the issue is when i am selecting first value the data is changed. I need when im selecting secodn value it will filter from previous data not from first filter.
You are filtering the array and assigning it back to the same array, so you are trying to refilter an already filtered array. You should use a helper array when filtering:
filteredData = [];
// ....
print() {
this.filteredData = this.data.filter(category => category.categories[0].id === this.selectedOption);
}
and then use the helper array to display the filtered values.
This is because you have already filtered the array, so other objects are removed.
Try like this:
this.originalArray = [...this.data];
this.data = this.originalArray.filter(category => category.categories[0].id === this.selectedOption);
Keep the original data in an array originalArray, then you can keep the filtered data from originalArray in array data
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With