CODEWITHSUNDEEP
angularionic3rxjs6
Francisco Souza
Francisco Souza

Reputation: 828

Using map and filter in RxJs 6 (Ionic/Angular) is not working properly in object array, filter ignored

Does anybody know why this filter after mapping, is not working?

When I do this:

this.cacheService.getMainCache().pipe( map(val => val.list)).subscribe((val) => {
  console.log(val);
}, (error) => {
  console.log('Error: ', error);
});

I get this array of objects: enter image description here

I need to filter this array and return only one, the one with the name property equal to some string, when I add the filter operator to the pipe nothing happens, I suppose nothing is filtered:

this.cacheService.getMainCache().pipe(map(val => val.list), filter((item: any) => item.name == 'profile')).subscribe((val) => {
  console.log(val);
}, (error) => {
  console.log('Error: ', error);
});

What am I doing wrong here?

Upvotes: 2

Views: 1646

Answers (4)

Jesse
Jesse

Reputation: 2597

@devnosaur, Your most recent update where you chain pipes, the chained pipes are actually unnecessary. The most effective change you made was switchMap(val => from(val.list) which has the same effect as

map(val => val.list), concatAll()

that A. Winnen recommended above. In my opinion, even though it is an extra line, doing map then concatAll() communicates much better, whereas using a flattening operator (switchMap) on a created observable (from) seems hacky.

Upvotes: 0

Francisco Souza
Francisco Souza

Reputation: 828

Thank you all, but I managed to solve it chaining the pipes, my mistake:

this.cacheService.getMainCache()
  .pipe(switchMap((val) => from(val.list)))
  .pipe(filter((item: any) => item.name == 'profile'))
  .subscribe((val) => {
  console.log(val);
}, (error) => {
  console.log('Error: ', error);
});

Upvotes: 2

A.Winnen
A.Winnen

Reputation: 1698

The problem with your snippet is the type of item. You expect the filter function to filter the items. But in your case, item is the whole array itself. Since the array does not have a property "name", nothing is showing at the subscriber. I suggest to use proper typing.

you have two options:

  1. use standard javascript filter:
this.cacheService.getMainCache().pipe(
    map(val => val.list.filter((item: any) => item.name == 'profile'))
).subscribe((val) => {
    console.log(val);
}, (error) => {
  console.log('Error: ', error);
});
  1. convert your array into individual values and filter by rxjs filter operator, then pack them into array again:
this.cacheService.getMainCache().pipe(
        map(val => val.list),
        concatAll(),
        filter((item: any) => item.name == 'profile')),
        toArray()
    ).subscribe((val) => {
        console.log(val);
    }, (error) => {
      console.log('Error: ', error);
    });

Upvotes: 3

Ganesh
Ganesh

Reputation: 6016

try this @devnosaur, it may solve your issue. for more about Observable filter have a look here 

 this.cacheService.getMainCache().map((value: any)=> value.filter(val=> val.name === 'profille')).subscribe((val) => {
      console.log(val);
    }, (error) => {
      console.log('Error: ', error);
    });

Upvotes: 1

Related Questions