I am currently facing an issue with my Angular component that includes 3 filters (category, rating, and price). When I select these filters, I should only display the relevant data. To achieve this, I have created a Pipe and passed in all three selected values. The category filter is functioning correctly, but the rating and price filters are not working as expected.
Json data:
"allBusiness": [
{
"category": "XYZ",
"description": "something something",
"business": [
{
"type": "Store",
"rating": 4,
"price" : "$"
},
{
"type": "Store",
"rating": 3,
"price" : "$"
},
{
"type": "Store",
"rating": 5,
"price" : "$$"
}
]
},
{
"category": "ABC",
"description": "Testing",
"business": [
{
"type": "Online",
"rating": 3,
"price" : "$"
},
{
"type": "Store",
"rating": 2,
"price" : "$"
},
{
"type": "Store",
"rating": 1,
"price" : "$$"
}
]
}
]
FilterPipe.ts:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(allBusiness: any[], selectedCategory: string, selectedRating: number, selectedPrice: string): any {
if (allBusiness && allBusiness.length){
return allBusiness.filter(item =>{
if (category && item.category.indexOf(selectedCategory) === -1){
return false;
}
if (rate && item.business.filter(rt => rt.rating != selectedRating)){
return false;
}
if (price && item.business.find(pr => pr.price != selectedPrice)){
return false;
}
return true;
})
}
else{
return items;
}
}
}
Any help would be greatly appreciated.