Angular 11 : Functionality to filter List Table via Two Multi-select Dropdowns

Question

I am currently trying to solve the logic needed to filter a list of objects:
(competitions.data.ts) See Below
via two Multi-select dropdowns (where one or more elements can be marked as selected from each of them):
(bikes.data.ts and countries.data.ts) See Below
so that only the records in the list are relevant to what I have selected based on the data that they have within them. Both dropdowns require to work together as filters with eachother to narrow down the lists data.

bikes.data.ts and countries.data.ts are the two sets of data that will be used at the data to filter by while competitions.data.ts is the data to be filter against and presented in the list. If no filters are active, it should simply return the original set of data.

Example screen:

Filtering by Mountain and Electric (Selected) in the bikes dropdown ALONG WITH GB and FR (Selected) in the countries dropdown should return the relevant filtered results in the list.

bikes.data.ts (filter 1 data) :

export class BikeData {
public static bikes: Bike[] = [  
  {
    'id': '0luT3vVGeS',
    'index': 1,
    'isActive': true,
    'name': 'Electric',
    'picture': '../../assets/images/data/bike-icons/EL.jpg'
  },
  {
    'id': 'o4IGM7T5qb',
    'index': 2,
    'isActive': true,
    'name': 'Mountain',
    'picture': '../../assets/images/data/bike-icons/MN.png'
  },
  //....
 ]
}

countries.data.ts (filter 2 data)

export class CountryData {
public static countries: Country[] = [
  {
    'id': 'WWvtHXaHuO',
    'index': 1,
    'isActive': true,
    'name': 'France',
    'picture': '../../assets/images/data/flags/FR.png',
    'abbrv': "FR"
  },
  {
    'id': 'ZU479oD4RF',
    'index': 2,
    'isActive': true,
    'name': 'Great Britain',
    'picture': '../../assets/images/data/flags/GB.png',
    'abbrv': "GB"
  },
//...
 ]
}

competitions.data.ts

export class CompetitionData {
public static competitions: Competition[] = [
  {
    'id': '0luT3vVGeS',
    'index': 1,
    'isActive': true,
    'title': 'Scotland Mountain Tour',
    'host': 'Scotland Cycles',
    'bike': 'Mountain',
    'country': 'GB',
    'prizePoolTotal': 500000,
    'date': "Sat May 29 2021 11:00",
    'timezone': 'GMT',
    'totalSpaces': 3000,
    'availableSpaces': 1500
  },
  {
    'id': '5lOu8vIUeG',
    'index': 2,
    'isActive': true,
    'title': 'South France Electric',
    'host': 'FR Electric',
    'bike': 'Electric',
    'country': 'FR',
    'prizePoolTotal': 57000,
    'date': "Sat May 29 2021 11:00",
    'timezone': 'GMT',
    'totalSpaces': 300,
    'availableSpaces': 200
  },
//...
 ]
}

What I have so far
I figured that a pipe implemented on my list like so :

  <tbody *ngFor="let competition of competitions | tableFilter: filterVar; let i = index"

would be a good start. I then use this filter pipe logic with i declare in my table-filter.pipe.ts file :

The above pipe code works with this variable (which is a single object):

filterVar = {bike: "Electric", country : "FR"};

Then the competition objects which match thier bike field with 'Electric' and country with 'FR' will be shown in the list

But when it comes to using multiple objects and to then have a possible second list of objects to filter by , things might become a little more complex and Im not sure where to start at the moment.

Any Ideas on how to implement this filter functionality?

UPDATE #1
After attempting to implement Kinglish's working solution (it definitely does work, run the code snippet below to test), I feel as thought the challenge is trying to implement the filter logic in typescript maybe? Here I wrote the function below however it returns 0 results:

private filterTable(list : any[],filter : Object){
    console.log('------ the list: ', list)
    console.log('------ with filter: ', filter)
    let thefilter = Object.entries(filter);
    const result = list.filter(item => {
      let c = 0;
      // can only return true if each condition passes
      thefilter.length === 0 || thefilter
        .map(([key, val]) => {
          if (!Array.isArray(val)) val = [val]
          c += val.filter(v => {
            return item[key] === v;
          }).length;
        })
      return c >= thefilter.length
    })
    console.log('Found ' + result.length + ' results: ', result)
}

To test , I call the following code in my ngOnInit() function:

public ngOnInit(){
    let filter = {
        bikes: ["Mountain", "Electric"],
        countries: "FR"
    }
    this.competitions= CompetitionsData.competitions; //Our competitions.data
    console.log(this.competitions);
    this.filterTable(this.competitions,filter) 
}

However we still recieve in console :

(4) [{…}, {…}, {…}, {…}]
------ the list:  (4) [{…}, {…}, {…}, {…}]
------ with filter:  {bikes: Array(2), countries: "FR"} 
Found 0 results:  []

Maybe I incorrect use of typescript here?

I posted, then realized it needed work. It's ready to test now. — Kinglish
filterTable(list : any[],filter: any) or filterTable(list : any[],filter: object) (lower case o) - do either of those work? — Kinglish

Kinglish Kinglish · Accepted Answer · 2021-06-06T23:37:23

This should do the trick. You'll have to modify it a little to fit into your logic (as I had to make this testable here). But it will work. You can see how it accepts filter parameters (allowing for arrays). Give it a go and let me know if it works for you.

const items = [{
    'id': '0luT3vVGeS',
    'index': 1,
    'isActive': true,
    'title': 'Scotland Mountain Tour',
    'host': 'Scotland Cycles',
    'bike': 'Mountain',
    'country': 'GB',
    'prizePoolTotal': 500000,
    'date': "Sat May 29 2021 11:00",
    'timezone': 'GMT',
    'totalSpaces': 3000,
    'availableSpaces': 1500
  },
  {
    'id': '5lOu8vIUeG',
    'index': 2,
    'isActive': true,
    'title': 'South France Electric',
    'host': 'FR Electric',
    'bike': 'Electric',
    'country': 'FR',
    'prizePoolTotal': 57000,
    'date': "Sat May 29 2021 11:00",
    'timezone': 'GMT',
    'totalSpaces': 300,
    'availableSpaces': 200
  },
  {
    'id': '5lOddu8vIUeG',
    'index': 2,
    'isActive': true,
    'title': 'South France Electric',
    'host': 'FR Electric',
    'bike': 'Electric',
    'country': 'USA',
    'prizePoolTotal': 57000,
    'date': "Sat May 29 2021 11:00",
    'timezone': 'GMT',
    'totalSpaces': 300,
    'availableSpaces': 200
  },
  {
    'id': '5lOddu899vIUeG',
    'index': 2,
    'isActive': true,
    'title': 'South France Electric',
    'host': 'FR Electric',
    'bike': 'Mountain',
    'country': 'CZ',
    'prizePoolTotal': 57000,
    'date': "Sat May 29 2021 11:00",
    'timezone': 'GMT',
    'totalSpaces': 300,
    'availableSpaces': 200
  }
]

// test function
const testFilter = (filter) => {
  console.log('------ with filter: ', filter)

  let thefilter = Object.entries(filter);
  const result = items.filter(item => {
    let c = 0;
    // can only return true if each condition passes
    thefilter.length === 0 || thefilter
      .map(([key, val]) => {
        if (!Array.isArray(val)) val = [val]
        c += val.filter(v => {
          return item[key] === v;
        }).length;
      })
    return c >= thefilter.length
  })
  console.log('Found ' + result.length + ' results: ', result)
}

// testing

let filter = {
  bike: ["Electric", "Mountain"],
  country: "FR"
}
testFilter(filter)

/* ---------- */

filter = {
  bike: "Mountain"
}
testFilter(filter)

/* ---------- */

filter = {
  bike: "Mountain",
  country: ["FR", "USA", "GB"]
}
testFilter(filter)

/* ---------- */

filter = {}
testFilter(filter)

Angular 11 : Functionality to filter List Table via Two Multi-select Dropdowns

1 Answers