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

Question

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:

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?

A.Winnen · Accepted Answer · 2019-01-05 16:51:08Z

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:

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);
});

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);
    });

Francisco Souza · Accepted Answer · 2019-01-05 16:54:55Z

2

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);
});

answered Jan 5, 2019 at 16:54

Francisco Souza

82817 silver badges41 bronze badges

Comments

Ganesh · Accepted Answer · 2019-01-05 16:39:38Z

1

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);
    });

edited Jan 5, 2019 at 16:39

answered Jan 5, 2019 at 16:20

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

2 Comments

Francisco Souza Over a year ago

Thanks, but no, I don't mean the "javascript filter" but the Observable filter. Thanks anyway.

Francisco Souza Over a year ago

Error: TypeError: value.filter is not a function

Jesse · Accepted Answer · 2019-01-05 21:56:41Z

0

@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.

answered Jan 5, 2019 at 21:56

Jesse

2,66516 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related