CODEWITHSUNDEEP
javascriptangular
Saif Warsi
Saif Warsi

Reputation: 338

How to filter table data in angular

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?

Upvotes: 1

Views: 12810

Answers (4)

Mustafa Kunwa
Mustafa Kunwa

Reputation: 867

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)
         }
      }
    }

Upvotes: 2

Santosh Shinde
Santosh Shinde

Reputation: 1212

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));
  }
 }

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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));
}

Upvotes: 1

Umesh
Umesh

Reputation: 2732

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.

Upvotes: 2

Related Questions