How to filter table data in angular

Question

export class EmployeeDetailsComponent implements OnInit {
  employees: any = [];
  public errorMsg;
  // you can define also below
  // errorMsg:any = [];
  constructor(private _employeeService: EmployeeService) {}

  ngOnInit() {
    this._employeeService.getEpmloyees().subscribe(
      data => (this.employees = data),
      error => (this.errorMsg = error)
    );
  }

  applyFilter(filterValue: string) {
    this.employees.filter = filterValue.trim().toLocaleLowerCase();
  }
}

<body>
  <p><input type="text" (keyup)="applyFilter($event.value)"></p>
  <table border="1">
    <tr>
      <th>ID</th>
      <th>NAME</th>
      <th>AGE</th>
      <th>Mobile</th>
    </tr>

    <tbody *ngFor="let employee of employees; i as index">
      <tr>
        <td>{{employee.id}}</td>
        <td>{{employee.name}}</td>
        <td>{{employee.age}}</td>
        <td>{{employee.mob}}</td>
      </tr>
    </tbody>
  </table>
</body>

Above is my code I just wanted to know what is going wrong in the filter method what I exactly need to change to make this work. and how do I fetch properly filtered data?

What does the response of your data look like?

Nicholas K
– Nicholas K

2019-12-13 06:41:33 +00:00
Commented Dec 13, 2019 at 6:41 — Nicholas K
– Nicholas K, Commented Dec 13, 2019 at 6:41

Mustafa Kunwa · Accepted Answer · 2019-12-13 08:15:44Z

Try this

export class EmployeeDetailsComponent implements OnInit {
      employees: any = [];
      allEmployees:any=[];
      public errorMsg;
      constructor(private _employeeService: EmployeeService) {}

      ngOnInit() {
        this._employeeService.getEpmloyees().subscribe(
          data => (
              this.employees = data,
              this.allEmployees=data;//You don't want to override you search data with all employee list
          ),
          error => (this.errorMsg = error)
        );
      }

      applyFilter(filterValue: string) {
         let filterValueLower = filterValue.toLowerCase();
         if(filterValue === '' ) {
             this.employees=this.allEmployees;
         } 
         else {
           this.employees = this.allEmployees.filter((employee) => employee.name.includes(filterValueLower)
         }
      }
    }

Umesh · Accepted Answer · 2019-12-13 06:41:33Z

2

I guess the filter string should be applied to some field in the array to filter the data e.g. name:

applyFilter(filterValue: string) {
    this.employees.filter(i => i.name.toLowerCase().includes(filterValue.toLowerCase());
  }

you also don't want to apply filter on every key up, until you want to use debounce.

answered Dec 13, 2019 at 6:41

Umesh

2,74221 silver badges24 bronze badges

Comments

Ankit Agarwal · Accepted Answer · 2019-12-13 06:41:46Z

1

According to what you need, you need to use the filter() function on this.employees array and based on your requirement on which property you want to filter, either all or specific property of employee object, you can set your filter condition. Then your code will look something like this:

applyFilter(filterValue: string) {
  let filterValueLower = filterValue.toLowerCase();
  this.employees = this.employees.filter((employee) => employee.id.includes(filterValueLower) || employee.name.toLowerCase().includes(filterValueLower) || employee.age.toLowerCase().includes(filterValueLower) || employee.mob.toLowerCase().includes(filterValueLower));
}

answered Dec 13, 2019 at 6:41

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

Comments

Santosh Shinde · Accepted Answer · 2019-12-13 06:50:41Z

0

Try like this

template.html

<input type="text" (keyup)="applyFilter($event.target.value)"></p>

component.ts

applyFilter(filterValue: string) {
    let filterValueLower = filterValue.toLowerCase();
    if(filterValue === '' ) {
        this.employees
    } else {
       this.employees = this.employees.filter((employee) => 
                        employee.id.includes(filterValueLower) || 
                        employee.name.toLowerCase().includes(filterValueLower) || 
                        employee.age.toLowerCase().includes(filterValueLower) || 
                        employee.mob.toLowerCase().includes(filterValueLower));
  }
 }

answered Dec 13, 2019 at 6:50

Santosh Shinde

1,21210 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to filter table data in angular

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related