CODEWITHSUNDEEP
javascriptangulartypescript
Gustavo
Gustavo

Reputation: 914

Using multiple fields on Filter Pipe | Angular 4

I was wondering how would I use Pipe to filter a json object using multiple inputs fields, here's my code so far with only one field filtering by name:

TS

members = [
    {name:'Carl', country:"Brazil"},
    {name:'John', country:"United States"},
    {name:'Madhu', country:"India"}
  ]

PIPE.TS

  transform(members: any, term: any): any {
//check if search term is undefined
if (term === undefined) return members;

//return updated members array
return members.filter(function(member){
  return member.name.toLowerCase().includes(term.toLowerCase());
})
  }

HTML

<input type="text" [(ngModel)]="term" name="any"/>

          <li *ngFor="let member of members | filter:term">

              <h3>{{member.name}}</h3>
              <span>{{member.country}}</span>

          </li>

I want to add an extra input field where it will search for the country.

EDIT:

It worked with the following code:

TS COMPONENT

 fields: any  = { name: "", country: "" };
  filters: any = { name: "", country: "" };

  updateFilters(): void {
      this.filters = Object.assign({}, this.fields);
      console.log(this.filters);
  }

HTML

<input type="text" name="any" [(ngModel)] = "fields.name" (ngModelChange)="updateFilters()"/>
          <input type="text" name="anyy" [(ngModel)] = "fields.country" (ngModelChange)="updateFilters()"/>

<li *ngFor="let member of members | filter: filters">
            <div style="border-bottom: 1px solid; border-color:rgba(0,0,0,0.3);margin-bottom:15px">
              <h3>{{member.name}}</h3>
              <span>{{member.country}}</span>
            </div>
          </li>

PIPE.TS

  transform(members: any, filters: any): any {
    return members.filter(item => {
    return (item.name.toLowerCase().indexOf(filters.name.toLowerCase()) >= 0 && item.country.toLowerCase().indexOf(filters.country.toLowerCase()) >= 0);

    });
  }

Upvotes: 2

Views: 5415

Answers (1)

Faly
Faly

Reputation: 13356

You can pass an object instead of multiple fields:

<li *ngFor="let member of members | filter: filters">

In your component's class:

filters: any = { name: "ex", country: "a country" };

UPDATE:

<input type="text" [(ngModel)] = "fields.name" (ngModelChange)="updateFilters()"/>
<input type="text" [(ngModel)] = "fields.country" (ngModelChange)="updateFilters()"/>

In your component:

fields: any  = { name: "", country: "" };
filters: any = { name: "", country: "" };

updateFilters(): void {
    this.filters = Object.assign({}, this.fields);
}

Upvotes: 4

Related Questions