Filter observable array by object property

Question

I currently have an array of observables which I'm iterating over using an *ngFor loop with the async pipe. I would like to filter the observables by a property value on the object, e.g

Original array:

[{ name: test1,
   type: type1},
 { name: test2,
   type: type2}
 { name: test3,
   type: type1}
 { name: test4,
   type: type2}]

I would like to filter this and make two new observable (arrays), one for type1 and one for type2

I tried obs.filter(x => x.type == "type1) but it returns nothing

I then tried obs.mergeAll().filter(x => x.type == "type1") and I can subscribe to this and log it to the console correctly but now it doesn't work with my *ngFor (async pipe). I'm guessing it's because the mergeAll means it's no longer an observable array? So do I need to convert it back?

@AnjilDhamala Please don't edit posts to add random italic and bold markdown. The code markdown was ok (if incomplete), but the rest only made it harder to read. — John Montgomery
– John Montgomery, Commented Apr 5, 2019 at 19:31

Kamil Naja · Accepted Answer · 2019-04-05 20:02:12Z

1

You are probably missing pipe operator from RXJS6.

import { of, from } from "rxjs";

import { filter, map } from "rxjs/operators";

const obs = from([{
    name: 'test1',
    type: 'type1'
},
{
    name: 'test2',
    type: 'type2'
},
{
    name: 'test3',
    type: 'type1'
},
{
    name: 'test4',
    type: 'type2'
}]);

const source = obs.pipe(
    filter(data => data.type === 'type2')
)


console.log(source.subscribe(item => console.log(item)));
// prints {name: "test2", type: "type2"}
{name: "test4", type: "type2"}

If you want to get an array:


const items = [];
console.log(source.subscribe(item => items.push(item)));
console.log(items);

edited Apr 5, 2019 at 20:02

answered Apr 5, 2019 at 19:48

Kamil Naja

6,8967 gold badges38 silver badges55 bronze badges

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

Collectives™ on Stack Overflow

Filter observable array by object property

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related