Upon receiving the following API response:
[
{
"imgPaths":[
"gallery/products/55ccb60cddb4d9bded02accb26827ce4"
],
"_id":"5f3e961d65c6d591ba04f3d3",
"productName":" Jiva Ayurveda Honey (500g) ",
"categoryId":{
"_id":"5f2139322d46a455487b2ea6",
"categoryName":"Nutrition and supplements",
"imgPath":"gallery/category/c20ae1717899fad2a6ff3f3ceab381ff"
},
"manufacturer":"Jiva",
"basePrice":"190",
"finalPrice":"187",
"availability":"in-stock",
"createdAt":"2020-08-20T15:26:21.092Z"
},
{
"imgPaths":[
"gallery/products/72b0e1cf078f26ed0ec0280c1cf8865d"
],
"_id":"5f3e962465c6d591ba04f3d4",
"productName":"Baidyanath Keshrikalp Royal Chyawanprash (500g) ",
"categoryId":{
"_id":"5f2139322d46a455487b2ea6",
"categoryName":"Nutrition and supplements",
"imgPath":"gallery/category/c20ae1717899fad2a6ff3f3ceab381ff"
},
"manufacturer":"Baidyanath",
"basePrice":"394",
"finalPrice":"378",
"availability":"in-stock",
"createdAt":"2020-08-20T15:26:28.103Z"
}
]
I am looking to implement multiple filters for 'manufacturer' and 'finalPrice', as well as various sorting options such as 'high to low', 'low to high', and 'recently added'. To achieve this, I have written the following methods:
- To handle sorting:
onSortChange(event) {
if(event.value==="Lowtohigh"){
this.productsbycategory.sort((a, b) => {
return Number(a.finalPrice) - Number(b.finalPrice);
})
}
else if(event.value==="hightolow"){
this.productsbycategory.sort((a, b) => {
return Number(b.finalPrice) - Number(a.finalPrice);
})
}
else if(event.value==="recentlyadded"){
this.productsbycategory.sort((a, b) => {
return +new Date(b.createdAt) - +new Date(a .createdAt);
})
}
}
- For filtering by manufacturer:
onBrandFilterChange(event) {
if(event.target.checked===true && !numbers.includes(event.target.value)){
numbers.push(event.target.value);
this.productsbycategory= _.filter(this.filteredProducts, function(p){
return _.includes(numbers, p.manufacturer);
});
}
else if(event.target.checked===false && numbers.includes(event.target.value)){
_.pull(numbers,event.target.value);
if(numbers.length>0){
this.productsbycategory= _.filter(this.filteredProducts, function(p){
return _.includes(numbers, p.manufacturer);
});
}
else{
this.setData();
}
}
}
- For filtering by price range:
onPriceFilterChange(min, max) {
console.log(min, max);
if (min >= 1 && max <= 5000) {
this.productsbycategory = this.productsbycategory.filter(function (elem) {
return Number(elem.finalPrice) >= min && Number(elem.finalPrice) <= max;
});
} else {
alert('Please select a valid price range');
}
}
I aim to enhance the existing code to enable applying all filters and sorting functionalities simultaneously. }