flexible pipe to filter objects

Question

i am trying to make a flexible pipe to filter my array of objects to display it with *ngFor

<div class="wrapper" *ngFor="let item of items | myFilter:property:true">

for example i want to show div only for object with true property :

[
{'name':'first', 'property': 'true'}, 
{'name':'last', 'property': 'false'}
]

It seems not to work when i try to set property dynamically like this

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

@Pipe({
name: 'myFilter'
})
export class FilterPipe implements PipeTransform {
     transform(items: any[], key: any, value: any): any {
         return items.filter(item => item[key] === value ? item : null);
     }
}

I tried also this

item['"' + key + '"']

and this (with es6 template strings)

item[`"$key"`]

but this pipe works well if i call property straight like this

item.property

And i really need to make it more flexible, because i have a lot of situations in my app where i need to filter items by different properties values

Check this out: http://stackoverflow.com/questions/41672578/filter-on-multiple-columns-using-one-pipe-angular-2/41841674#41841674 — seidme, May 18 '17 at 14:01

score 0 · Answer 1 · answered May 18 '17 at 13:51

0

Array.filter expects your filter function to return a boolean, meaning that you should change your filter for this:

transform(items: any[], key: any, value: any): any {
     return items.filter(item => item[key] === value);
 }

Source: MDN

answered May 18 '17 at 13:51

Supamiu

8,501
7
42
76

thx for correction, but it still not work. As i said, it was working with straight property calling – Oleg Burdasov May 18 '17 at 13:56
you should probably check if item[property] exists using a console.log just before the return (check with console.log(items[0][property])) – Supamiu May 18 '17 at 13:59

score 0 · Accepted Answer · answered May 18 '17 at 14:01

0

Your pipe is definitely correct, you are just missing the '' on your HTML. Try to call it like this: <div class="wrapper" *ngFor="let item of items | myFilter:'property':true"> and it will work perfectly. This is because the pipe expects a string, but you are giving an object reference. property != 'property'

answered May 18 '17 at 14:01

Gianluca Paris

1,391
1
14
25

Happy it helped :) – Gianluca Paris May 18 '17 at 14:06
Remember that is the same for the key value, if you want to compare strings and not boolean, you have to use the '' :) – Gianluca Paris May 18 '17 at 14:07
item['"' + key + '"'] and item['"' + key + '"'] – Oleg Burdasov May 18 '17 at 14:08
i mean item['"' + key + '"'] and item[`"$key"`] , because i tried to solve this problem like you but in different way, to not add '' in html – Oleg Burdasov May 18 '17 at 14:09
Because by writing "myFilter : property" you are passing to you key value an object called "property", that does not exist, is undefined. Instead you have to pass a string that contains the effective value you want to compare – Gianluca Paris May 18 '17 at 14:10
"property" is a string with value "property" property is an object called property with value undefined because it does not exist – Gianluca Paris May 18 '17 at 14:11

flexible pipe to filter objects

2 Answers2