I need help with some filtering using Angular Material's MatTableDatasource. What I am doing is trying to filter for values that are between a pair of numbers. I got normal filtering going, but filtering for these specific values is not as easy I thought it would be.
In my scenario, I want to filter for values between a certain mileage of a vehicle, as well as between a certain price range
What I have tried:
//Method that loads the snapshot from the json and loads it into the Table
this.registeredUserService.GetAllAdverts().subscribe(val => {
this.global = val;
this.dataSource = new MatTableDataSource<Card>(val);
this.dataSource.paginator = this.paginator;
this.dataSource.filterPredicate = (myObject: IFilter, filterString: any) => {
let filterObj: IFilter = JSON.parse(filterString);
console.log(filterObj);
if (
(filterObj.provinceName && filterObj.provinceName.length > 0 && !filterObj.provinceName.includes(myObject.provinceName)) ||
(filterObj.vehicleMake && filterObj.vehicleMake.length > 0 && !filterObj.vehicleMake.includes(myObject.vehicleMake)) ||
(filterObj.vehicleModel && filterObj.vehicleModel.length > 0 && !filterObj.vehicleModel.includes(myObject.vehicleModel)) ||
(filterObj.vehicleYear && filterObj.vehicleYear.length > 0 && !filterObj.vehicleYear.includes(myObject.vehicleYear)) ||
(filterObj.vehicleColor && filterObj.vehicleColor.length > 0 && !filterObj.vehicleColor.includes(myObject.vehicleColor)) ||
(filterObj.vehicleMileage && filterObj.vehicleMileage.length > 0 && !filterObj.vehicleMileage.includes(myObject.vehicleMileage)) ||
(filterObj.sellingPrice && filterObj.sellingPrice.length > 0 && !filterObj.sellingPrice.includes(myObject.sellingPrice))) {
return false;
} else {
return true;
}
}
myFilter: IFilter = {
provinceName: [],
vehicleMake: [],
vehicleModel: [],
vehicleColor: [],
vehicleYear: [],
vehicleMileage: [],
sellingPrice: [],
}
addfilter() {
console.log(this.paginator);
this.myFilter.provinceName = this.search.value.provinceSelector;
this.myFilter.vehicleMake = this.search.value.makeSelector;
this.myFilter.vehicleModel = this.search.value.modelSelector;
this.myFilter.vehicleColor = this.search.value.colorSelector;
this.myFilter.vehicleYear = this.search.value.yearSelector;
var priceArray = [];
var mileageArray = [];
this.hpService.GetAdvertisedPrices().subscribe(val => {
this.myFilter.sellingPrice = null;
val.forEach(v => {
if (parseInt(v.sellingPrice) >= this.value && parseInt(v.sellingPrice) <= this.highValue) {
priceArray.push(v.sellingPrice);
}
});
this.myFilter.sellingPrice = priceArray;
})
this.hpService.GetAdvertisedMileages().subscribe(val => {
this.myFilter.vehicleMileage = null;
val.forEach(v => {
if (parseInt(v.vehicleMileage) >= this.minMileage && parseInt(v.vehicleMileage) <= this.maxMileage) {
mileageArray.push(v.vehicleMileage);
}
});
this.myFilter.vehicleMileage = mileageArray;
})
if (this.myFilter.provinceName.length == 0 &&
this.myFilter.vehicleMake.length == 0 &&
this.myFilter.vehicleModel.length == 0 &&
this.myFilter.vehicleColor.length == 0 &&
this.myFilter.vehicleYear.length == 0) {
this.myFilter.provinceName = '';
this.myFilter.vehicleMake = '';
this.myFilter.vehicleModel = '';
this.myFilter.vehicleYear = '';
this.myFilter.vehicleColor = '';
this.dataSource.filter = '';
}
if (this.myFilter.provinceName == 0) {
delete this.myFilter.provinceName;
}
if (this.myFilter.vehicleMake.length == 0) {
delete this.myFilter.vehicleMake;
}
if (this.myFilter.vehicleModel.length == 0) {
delete this.myFilter.vehicleModel;
}
if (this.myFilter.vehicleYear.length == 0) {
delete this.myFilter.vehicleYear;
}
if (this.myFilter.vehicleColor.length == 0) {
delete this.myFilter.vehicleColor;
}
this.dataSource.filter = JSON.stringify(this.myFilter);
this.global = this.dataSource;
let numOfAds = 0;
this.global.filteredData.forEach(e => {
this.imageToLoad[numOfAds] = { url: this.apiURL + '/api/Images/' + e.advertID + '_1' };
numOfAds++;
});
}
export interface Card {
advertDate: any;
advertDescription: any;
advertID: any;
cityName: any;
provinceName: any;
sellerID: any;
sellingPrice: number;
vehicleColor: any;
vehicleMake: any;
vehicleMileage: any;
vehicleModel: any;
vehicleYear: any;
}