Filtering an Array of Nested Objects Using Angular Pipes

Question

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>

Answer 1

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

stackblitz