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>
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?
Share Improve this question asked Dec 13, 2019 at 6:36 Saif WarsiSaif Warsi 3381 gold badge4 silver badges15 bronze badges 1- What does the response of your data look like? – Nicholas K Commented Dec 13, 2019 at 6:41
4 Answers
Reset to default 2Try 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)
}
}
}
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.
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));
}
Try like this
template.html
<input type="text" (keyup)="applyFilter($event.target.value)"></p>
ponent.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));
}
}