angular4 array filtering with multiple checkboxes condition

Question

I have an array with over 100 object and I use *ngFor for show the objects . how can filter these objects with multiple checkboxes condistion ?

* how can select just employees are in paris and london and also under 30? when related checkboxe is true *

what is the best way for best performance in DOM changing ?

export class showEmployees implements OnInit {



  constructor() { }

  ngOnInit() { }


  employees: any[] = [
    { city: 'paris', gender: 'male', age: 27 },
    { city: 'london', gender: 'female', age: 55 },
    { city: 'chicago', gender: 'male', age: 26 },
    { city: 'paris', gender: 'female', age: 56 },
    { city: 'london', gender: 'male', age: 60 },
    { city: 'chicago', gender: 'female', age: 24 },
    { city: 'london', gender: 'male', age: 54 },
    { city: 'paris', gender: 'female', age: 22 },
  ];

  list = this.employees;

  employeesFiltered = this.employees.slice();



  filterByParis(event) {

    if (event.target.value === 'paris' && event.target.checked) {
      this.employeesFiltered = this.employees.filter(
        item => item.city === 'paris'
      );

      this.list = this.employeesFiltered
    } else {
      this.list = this.employees
    }

  }

  filterByOld(event) {
    if (event.target.value === 'old' && event.target.checked) {
      this.employeesFiltered = this.employees.filter(
        item => item.age > 50
      );

      this.list = this.employeesFiltered
    } else {
      this.list = this.employees
    }
  }


}

<ul>
  <li> <input type="checkbox" value="paris" (change)="filterByParis($event)">paris</li>
  <li> <input type="checkbox" value="london" (change)="filterByLondon($event)">london </li>
  <li> <input type="checkbox" value="chicago" (change)="filterByChicago($event)">chicago </li>
  <li> <input type="checkbox" value="male" (change)="filterByMale($event)">male </li>
  <li> <input type="checkbox" value="female" (change)="filterByFemale($event)">female </li>
  <li> <input type="checkbox" value="old" (change)="filterByOld($event)"> greater than 50 </li>
  <li> <input type="checkbox" value="young" (change)="filterByYoung($event)">under 30 </li>
</ul>

<table>
  <thead>
    <th>city</th>
    <th>gender</th>
    <th>age</th>
  </thead>
  <tbody>
    <tr *ngFor="let member of list">
      <td>{{member.city}}</td>
      <td>{{member.gender}}</td>
      <td>{{member.age}}</td>
    </tr>
  </tbody>
</table>

is angular pipe best practice for this scenario ? is angular pipe best practice for this scenario ?

Eliseo · Accepted Answer · 2019-06-11 10:18:36Z

1

NOT use a pipe, but you need has only a function filter and re-think your code using arrays and [(ngModel)]. Imagine you has an array of object like

selects=[
{description:"París",type:"pais",data:"paris",value:false},
{description:"London",type:"pais",data:"london",value:false},
..
{description:"Male",type:"gender",data:"male",value:false},
{description:"Female",type:"gender",data:"female",value:false}
...
]

You can make a .html like

<ul>
  <li *ngFor="let select of selects>
     <input type="checkbox" [(ngModel)]="select.value"
         (change)="refresh()">{{select.data}}
  </li>
</ul>

Your function refresh() can be like

refresh()
{
    if (this.selects.find(x=>x.value)) //if there are al least one filter
    {
       this.employeesFiltered = null;
       this.selects.forEach(select=>{
        if (select.value)
        {
           switch(select.type)
           {
              case "pais":
                this.employeesFiltered=this.employeesFiltered ?
                     this.employeesFiltered.filter(e=>e.pais==select.data) :
                     this.employees.filter(e=>e.pais==select.data)
                break;
              case "gender":
                    ....
              ...
            }
           }
         }
       })
    }
    else
       this.employeesFiltered = this.employees;
}

edited Jun 11, 2019 at 10:18

answered Jun 11, 2019 at 8:37

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohammad Mirzaei Over a year ago

thank you . are you tested this code ? can you filter members are in paris and also are female and also are under 30

Eliseo Over a year ago

sorry, I'm not tested the code. There was an error: we need check if select.value -just corrected in code-, Im in hurry ::glups::

Collectives™ on Stack Overflow

angular4 array filtering with multiple checkboxes condition

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related