Adding multiple fields of an object considered for custom filter

Question

I have an object Person with properties name and surname and i made a filter by name but i would like to add another filter , filter by surname, in the same filter but i can't find to store both p.name , and p.surname in filter brackets, is it possible to check several fields of an object in same filter ?

import { Pipe, PipeTransform } from '@angular/core';
import { Person} from './person';

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {

  transform(person: Persons[], term: any): any {

    return persons.filter(p => p.name.toLowerCase().indexOf(term.toLowerCase())>-1);
  }
}

GHB · Accepted Answer · 2017-11-29 17:30:26Z

1

you can change your input of your filter to something like this:

export interface IFilterProps {
    name: string,
    term: streing
}

and inside your pipe:

export class FilterPipe implements PipeTransform {

  transform(person: Persons[], terms: IFilterProps[] ): any {
      let res: Persons[] = [];
      persons.forEach(
          (person)=>{
              let valid = true;
              terms.forEach(
                  (item)=>{
                      if(person[item.name].toLowerCase().indexOf(item.termtoLowerCase())===-1){
                          valid = false;
                      }
                  }
              )
              if(valid) {
                  res.push(person)
              }
          }
      )
      return res
  }
}

and in your component you can use it like this:

*ngFor="let item of personsArray | filter : [{name: 'name', term: 'someTerm'},{name: 'surname ', term: 'someOtherTerm'}]"

the benefit of this way is it's dynamicality and reusability

edited Nov 29, 2017 at 17:30

answered Nov 29, 2017 at 16:50

GHB

9476 silver badges13 bronze badges

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

1 Comment

Алекса Јевтић Over a year ago

I'll definitely check this code tomorrow , thanks for posting this ...it's nice to have reusable code

Sajeetharan · Accepted Answer · 2017-11-29 17:01:14Z

1

You can use && condition operator also it should be person not persons

return person.filter(p => p.color.toLowerCase().indexOf(term.toLowerCase())>-1 && p.firstname ==='yourvalue');

edited Nov 29, 2017 at 17:01

answered Nov 29, 2017 at 16:49

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

6 Comments

Алекса Јевтић Over a year ago

I tried adding it like this return person.filter(p => p.name.toLowerCase().indexOf(term.toLowerCase())>-1 && p.surname.toLowerCase().indexOf(term.toLowerCase()) >-1); but i'm getting an error Cannot read property 'filter' of undefined

Алекса Јевтић Over a year ago

sry check the edited version of comment i pressed enter for new line but .. :D

Алекса Јевтић Over a year ago

i had to add this before transform if (term===undefined) return person; , but still i can't check person.surname like this return person.filter(p => p.name.toLowerCase().indexOf(term.toLowerCase())>-1 && p.surname.toLowerCase().indexOf(term.toLowerCase())>-1);

Sajeetharan Over a year ago

what do you mean ?

Алекса Јевтић Over a year ago

I had to add if (term===undefined) because i couldn't load my view since i put the filter into ngFor and since the term is [(ngModel)] it's undefined so i couldn't get my PersonsTableView

|

Collectives™ on Stack Overflow

Adding multiple fields of an object considered for custom filter

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related