I am currently working on implementing a search functionality using a custom pipe in Angular. The goal is to be able to search through all strings or columns in a received JSON or array of objects and update the table accordingly.
Here is the code snippet of my Custom Pipe (although it's not performing as expected):
transform(items: any[], args:string): any {
let keys = [];
for (let key in items) {
keys.push({key: key, value: items[key]});
}
let ans = [];
for (let k in keys){
if(items[k].value.match('^.*' + args +'.*$')){
ans.push({key: k, value: items[k]});
}
}
return ans;
}
The search input HTML element :
<input type="text" #filterInput (keyup)="0">Loading the table data using the custom pipe:
<tbody *ngIf="usersBool">
<tr *ngFor="let entry of content | filterArrayOfObjects: filterInput" >
<td>{{entry.value.enrollmentId}}</td>
<td>{{entry.value.firstName}}</td>
<td>{{entry.value.LastName}}</td>
<td>{{entry.value.typeOfUser}}</td>
<td>edit</td>
<td>delete</td>
</tr>
</tbody>
Dummy content example:
this.content = [
{
"enrollmentId": "A0xxxxxx",
"firstName": "Bob",
"LastName": "Bob",
"typeOfUser": 'Admin'
},
{
"enrollmentId": "A0xxxxxx",
"firstName": "Bob",
"LastName": "Bob",
"typeOfUser": 'Admin'
},
{
"enrollmentId": "A0xxxxxx",
"firstName": "Bob",
"LastName": "Bob",
"typeOfUser": 'Admin'
}
];