CODEWITHSUNDEEP
node.jsjsonangularmongoose
Jainil Sharma
Jainil Sharma

Reputation: 35

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

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.

Upvotes: 0

Views: 2853

Answers (3)

Jainil Sharma
Jainil Sharma

Reputation: 35

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

Run below command:

npm i [email protected]

Upvotes: 2

Krishna Rathore
Krishna Rathore

Reputation: 9687

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>

Upvotes: 1

Shubham Sali
Shubham Sali

Reputation: 482

Try the below:-

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

Upvotes: 0

Related Questions