Search for a string in all properties of an object in Angular 2

J.Rem picture J.Rem · Jan 27, 2017 · Viewed 11.4k times · Source

How to search for a string in all properties of an object in Angular 2 with TS.

I have an array of customers rendered in a table with a search box, if the user types a value I want to search for all properties values to push a customer that matches the value typed.

export var CUSTOMER: Client[] = [
  { id: 1, name: 'John', phone: '888-888-888'},
  { id: 2, name: 'Nick', phone: '555-888-888'},
  { id: 3, name: 'Mike', phone: '666-888-888'},
];

The Filter Pipe

import {Pipe, PipeTransform, Injectable} from "@angular/core";

@Pipe({
  name: 'filter',
  pure: false
})
@Injectable()
export class Ng2SearchPipe implements PipeTransform {

  transform(items: any, term: any): any {
    if (term === undefined) {
      return items;
    }

    return items.filter(function(item){
      return item.name.toLowerCase().includes(term.toLowerCase());
    });
  }
}

In the filter pipe above I can only search by the name. I'm not sure how to approach this. Should I create a method for the Customer object that returns all property values concatenated and then search for the term on this concatenated value?

Answer

Aamir picture Aamir · Oct 17, 2017

You need to apply null check and use .toString() otherwise if value will be number it will not be able to use toLowerCase() method and will raise error.

return items.filter(item =>
  Object.keys(item).some(
    k =>
      item[k] != null &&
      item[k]
        .toString()
        .toLowerCase()
        .includes(term.toLowerCase())
  )
);