Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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: [],
  }

//filter method that does the filtering.
  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;
}
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900