how to filter array with multiple properties in angular

Question

I have created a pipe in my angular 5 project, which will takes the input from html and filter array and will return filtered array. But currently I am passing the property name("firstName") from HTML file. Now i want that, it should filter from properties "firstName" and "lastName" both. Please tell me what should i change to do the same ???

search-filter.pipe.ts

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

@Pipe({
    name: 'searchFilter'
})
export class SearchFilter implements PipeTransform {
    transform(data: any, search?: string, propertyName?: string): any {
        if (search === undefined) {
            return data;
        } else {
            return data.filter(obj => obj[propertyName].toLowerCase().includes(search.toLowerCase()));
        }
    }
}

user.component.html

<div class="row" *ngFor="let data of datas| searchFilter: search: 'firstName'}">
   {{data.lastName}}, {{data.firstName}}
</div>

sample-data.ts

 datas: [
{ firstName: 'vipin', company: 'abc', lastName: 'sharma' },
{ firstName: 'kevin', company: 'abc2', lastName: 'xyz' },
{ firstName: 'Leos', company: 'abc3', lastName: 'abc' },
]

Pass search text like 'firstName|lastName' & split that in pipe then search appropriate — Paresh Gami
– Paresh Gami, Commented Jun 4, 2018 at 7:59

Er Vipin Sharma · Accepted Answer · 2018-06-08 05:19:14Z

1

I got my answer and its working fine :

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

@Pipe({
    name: 'searchFilter'
})
export class SearchFilter implements PipeTransform {
    transform(data: any, search?: string, propertyName?: string, propertyName2?: string): any {
        if (search === undefined) {
            return data;
        } else {
            let filteredData = data.filter(obj => obj[propertyName].toLowerCase().includes(search.toLowerCase()));
            if (propertyName2) {
                filteredData = filteredData.concat(data.filter(obj => obj[propertyName2].toLowerCase().includes(search.toLowerCase())));
            }
            return filteredData;
        }
    }
}

answered Jun 8, 2018 at 5:19

Er Vipin Sharma

2,6699 gold badges25 silver badges33 bronze badges

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

Comments

Chrillewoodz · Accepted Answer · 2018-06-04 08:07:14Z

0

What you can do is concat the properties you want to search on:

this.items.map((item) => {
  return {...item, searchTerms: item.firstname + item.lastname;
});

<li *ngFor="let item of items | searchFilter:search:'searchTerms'>{{item.name}}</li>

edited Jun 4, 2018 at 8:07

answered Jun 4, 2018 at 7:59

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

Comments

Arun · Accepted Answer · 2018-06-05 10:51:33Z

0

Can you try like this

 this.data.filter((element: datatype) =>element.firstName && element.lastName)

answered Jun 5, 2018 at 10:51

Arun

4603 silver badges8 bronze badges

Collectives™ on Stack Overflow

how to filter array with multiple properties in angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related