Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 996
J.Rem Avatar asked Jan 27 '17 19:01

J.Rem


2 Answers

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())
  )
);
like image 61
Aamir Avatar answered Nov 15 '22 18:11

Aamir


You can loop over the keys of the item and see if any of them include the string, and return true if any number of them match:

return items.filter(item =>
  Object.keys(item).some(k => item[k].includes(term.toLowerCase());
)
like image 7
chrispy Avatar answered Nov 15 '22 19:11

chrispy