I am trying to filter nested array values along with object name is getting filter when I search number values like age, weight, height and mobile not getting anything. If match with the searchText it must return a specific value along with the object if not then return full array instead of not found message.
pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'FilterPipe',
})
export class FilterPipe implements PipeTransform {
transform(items: any, filter: any, defaultFilter: boolean): any {
if (!filter || !Array.isArray(items)) {
return items;
}
if (filter && Array.isArray(items)) {
let filterKeys = Object.keys(filter);
if (defaultFilter) {
return items.filter(item =>
filterKeys.reduce((x, keyName) =>
(x && new RegExp(filter[keyName], 'gi').test(item[keyName])) || filter[keyName] == "", true));
}
else {
return items.filter(item => {
return filterKeys.some((keyName) => {
return new RegExp(filter[keyName], 'gi').test(item[keyName]) || filter[keyName] == "";
});
});
}
}
}
}
app.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'testJobNestedArray';
searchableList: any;
searchText : string = "";
users : any;
constructor() { }
ngOnInit() {
this.users = [
{
name: 'manpreet',
data:{
age: 25,
weight: 65,
height: 5.6,
mobile: [9780698969, 6895741258]
}
},
{
name: 'abdul',
data: {
age: 26,
weight: 80,
height: 6.0,
mobile: [3698541258]
}
},
{
name: 'onkar',
data: {
age: 28,
weight: 70,
height: 5.8,
mobile: [8569741236, 6528965478]
}
}
]
// this.searchableList = ['name', 'age', 'weight', 'height', 'mobile']
console.log('this.users', this.users)
}
}
app.html
<router-outlet></router-outlet>
<div>
<h1>Nested Array Table</h1>
<div class="md-form">
<input type="text" [(ngModel)]="searchText" class="form-control" name="searchText" placeholder="Search" />
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>#ID</th>
<th>Name</th>
<th>Age</th>
<th>Weight</th>
<th>Height</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<tr
*ngFor="let item of users| FilterPipe:
{name: searchText, age: searchText, weight: searchText, height: searchText, mobile: searchText}; let i = index">
<td>{{ i+1 }}</td>
<td>{{ item.name }}</td>
<th>{{ item.data.age }}</th>
<td>{{ item.data.weight }}</td>
<td>{{ item.data.height}}</td>
<td>{{ item.data.mobile }}</td>
</tr>
</tbody>
</table>
</div>
In the FilterPipe class, kindly change the else statement as below
return items.filter(item => {
return filterKeys.some((keyName) => {
return new RegExp(filter[keyName], 'gi').test(item[keyName]) ||
new RegExp(filter[keyName], 'gi').test(item.data[keyName]) ||
filter[keyName] == "";
});
});
The issue was the the properties under data object was missed. see working code in below link