How to use search filter in Angular for nested JSON object?

Question

I am bringing data from my mongoose to display on my HTML table. I am able to filter a JSON object normally but unable to filter nested JSON object?

I have used "npm i ng2-search-filter --save " to import filter pipe, but this only works for the first level. Doesn't do filter for the nested JSON object.

My JSON object is:

{
    packageName:test,
    packagePrice:200,
    userid:{
        userName:John,
        userAge: 27
    }
}

     <input type="text" class="form-control" [(ngModel)]="searchtext" 
     placeholder="Search">

      <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">Package Name</th>
          <th scope="col">Package Price</th>
          <th scope="col">Customer Name</th>
          <th scope="col">Customer Age</th>
        </tr>
      </thead>
      <tbody *ngFor="let use of user | filter:searchtext">
        <tr class="table-active">
          <td> {{use.packageName}}</td>
          <td>{{use.packagePrice}}</td>
          <td>{{use.userid.userName}}</td>
          <td>{{use.userid.userAge}}</td>       
        </tr>
      </tbody>
    </table>

When I enter packageName and packagPrice in a textbox for search filter it filters out and shows me correct result, but on userName and userAge its not working. Please help. Thank you.

Now this feature is available in the latest release of the ng-search-filter — Prashant Pimpale
– Prashant Pimpale, Commented May 22, 2019 at 5:20
@PrashantPimpale tried pasting this in my node_module, didn't work — Jainil Sharma
– Jainil Sharma, Commented May 22, 2019 at 13:36
@PrashantPimpale previously i had installed using this command ng2-search-filter, and then later i just replaced the existing node_module file of ng2-search-filter with the rar file from github.com/solodynamo/ng2-search-filter/releases/tag/0.4.9 this link — Jainil Sharma
– Jainil Sharma, Commented May 22, 2019 at 13:55
@PrashantPimpale it was my mistake, I was installing the wrong version of the package, that was creating the issue. I installed the latest one now it's working fine. Thanks alot :D — Jainil Sharma
– Jainil Sharma, Commented May 23, 2019 at 5:54

Prashant Pimpale · Accepted Answer · 2019-05-23 06:25:45Z

2

I solved this with by just installing the latest version ng2 search filter.

Run below command:

npm i [email protected]

edited May 23, 2019 at 6:25

Prashant Pimpale

10.7k10 gold badges52 silver badges88 bronze badges

answered May 23, 2019 at 6:00

Jainil Sharma

352 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Krishna Rathore · Accepted Answer · 2019-05-17 05:33:34Z

You can use custom search pipe for this

I have create demo on Stackblitz

searchPipe.ts

transform(value: any, searchText?: any): any {
    if(!value) return [];
    if(!searchText) return value;
    searchText = searchText.toLowerCase();
    return value.filter( it => {
      return it.packageName.toLowerCase().includes(searchText) || it.packagePrice.toString().includes(searchText) || (it.userid &&  it.userid.userAge.toString().includes(searchText) || it.userid.userName.toLowerCase().includes(searchText));
    });
}

component.html

<tr class="table-active" *ngFor="let use of user | search:searchtext">
    <td> {{use.packageName}}</td>
    <td>{{use.packagePrice}}</td>
    <td>{{use.userid.userName}}</td>
    <td>{{use.userid.userAge}}</td>       
</tr>

Shubham Sali · Accepted Answer · 2019-05-17 04:50:32Z

0

Try the below:-

function getResult(filterBy, objList) {
return objList.hightlights.filter(function(obj) {
return obj.queries.some(function(item){
 return item.indexOf(filterBy) >= 0;
});
});
}

answered May 17, 2019 at 4:50

Shubham Sali

4822 silver badges9 bronze badges

3 Comments

Jainil Sharma Over a year ago

where should i paste this ?

Shubham Sali Over a year ago

you should edit as per your code this is one type of example you should edit please as per your requirement

Prashant Pimpale Over a year ago

@Shubham This will not work! He is using a third party library ng2-search-filter

Collectives™ on Stack Overflow

How to use search filter in Angular for nested JSON object?

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related