Angular 2 filter an Observabble<object[]>

Question

I want to show a list of IMessage on screen and be able to filter them using a Pipe. The message is actually an Observable<IMessage[]> on which I want to filter each IMessage by checking its isPrivate property. The code of the MessageStatusPipe looks like this:

export class MessageStatusPipe {
    transform(message: Observable<IMessage[]>, privateFilter: bool) {


        //Here I want to return the Messages which the pass the privateFilter, but how?

    }
}

I have read some questions which seem very similar but I don't seem to be able to apply that solution. The following solution by Luka Jacobowitz seems exactly what I need. https://stackoverflow.com/questions/37991713/simple-filter-on-array-of-rxjs-observable#=

============ Update with answer =============

As Meir pointed out the pipe returned a bool value instead of a sub array containing items that matched the filter. My working pipe now looks like this:

export class MessageStatusPipe {
    transform(messages: Observable<IMessage[]>, privateFilter: bool) {
        return messages.map(m => m.filter((message, i) => {
            return message.isPrivate == privateFilter;
        }));
    }
}

Meir · Accepted Answer · 2017-07-26 10:09:34Z

0

Your action can (should) be broken into 2 parts: 1. Getting the async values 2. Filtering them

So, you can change your pipe's signature to:

transform(messages: IMessage[], privateFilter: bool) { ... }

And in your component do:

<div *ngFor="let msg of messages | async | messageStatusPipe">...</div>

If for some reason you want to combine them into one pipe, you can have a look at an article I wrote that shows how to handle async values inside a pipe and adapt it to your needs (mainly, add your filtering loging)

============ added filter logic ==============

return messages.filter(privateFilter);

edited Jul 26, 2017 at 10:09

answered Jul 26, 2017 at 9:11

Meir

14.4k4 gold badges44 silver badges49 bronze badges

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

3 Comments

Bunnynut Over a year ago

<div *ngFor="let msg of messages | async | messageStatusPipe">...</div> That is actually what I already have in my component. transform(messages: IMessage[], privateFilter: bool) { ... } That is was my pipe used to look like but that gave an Observable<IMessage> on which I wasnt able to apply the filter.

Meir Over a year ago

Your pipe should not return a bool, it should return the sub array that matches your condition

Bunnynut Over a year ago

You are right, I updated my answer with a working solution.

Collectives™ on Stack Overflow

Angular 2 filter an Observabble<object[]>

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related