CODEWITHSUNDEEP
angularrxjsreactive-programmingobservablerxjs5
Appsum Solutions
Appsum Solutions

Reputation: 1029

Angular 2 RxJS groupBy flatMap empty

I'm pretty new to RXxJS, so I might be looking at it the wrong way, but I have a service that returns an array of 'Verpleegperiodes':

export class Verpleegperiode{
  verpleegperiodeId?: number;
  beginDatumUur?: moment.Moment;
  eindDatumUur?: moment.Moment;
  bed: string;
  kamer: string;
  dienst: Dienst;
  dossier: Dossier;
}

And in my component, I'm trying to get an array of 'Verpleegperiodes' grouped by the 'kamer' property, which is for ex. '101', '102', '103', ... So I'd like an Observable stream of for ex.: 

[{verpleegperiodeId: 1, kamer: '101'},{verpleegperiodeId: 3, kamer: '101'}]
[{verpleegperiodeId: 6, kamer: '102'}]

Or even better, if this is possible with RxJS:

{ kamer: '101', verpleegperiodes: [{verpleegperiodeId: 1, kamer: '101'},{verpleegperiodeId: 3, kamer: '101'}] }
{ kamer: '102', verpleegperiodes: [{verpleegperiodeId: 6, kamer: '102'}] }

For this, I've found documentation for Group By: https://www.learnrxjs.io/operators/transformation/groupby.html

Using this, I've added this code (using the dienstId parameter of the route) to produce this:

this.activeVerpleegperiodes$ = this._route.params
  .switchMap((params: Params) => this._infohosService.getActiveVerpleegperiodesByDienstId(params['dienstId']))
  .flatMap(verpleegperiodes => verpleegperiodes)
  .groupBy(vp => { console.log(vp.kamer); return vp.kamer; })
  .flatMap(group => { return group.reduce((acc, curr) => { return [...acc, curr]; }, []); })
  .map(f => { console.log(f); return f; } );

I have added some console.log's to check the values. The console.log in the groupBy part returns: 

101
101
102
...

I've already put some console.log's in the reduce function to log the acc and curr values, which are grouping the correct values in 1 array. However, the console.log in the map function never logs. Not even undefined or [].

In my template I try to print the async value of the stream too:

{{ activeVerpleegperiodes$ | async | json }}

This is always null.

How can I get the required result?

Upvotes: 0

Views: 811

Answers (1)

maxime1992
maxime1992

Reputation: 23803

If you array of Verpleegperiodes arrives in one time, you don't need RxJs.

RxJs is here to help you manipulate values over time.

You may be interested in something like that : https://stackoverflow.com/a/34890276/2398593 (or lodash, but lodash seems overkill only for that).

Upvotes: 1

Related Questions