GroupBy 'rxjs/operators' to array with key and array of values in angular 6

Question

I have a question, I am getting an array as a response from web api

Structure of response is simple:

interface CabinInfo {
    id: number;

    projectId: number;
    cabinId: number;
    ipAddress: string;
    port: number;
}

So now I need to group it by projectId, so naturally i would use rxjs/operators to get some sort od array that i can iterate in html, so I am using:

        this.clientService.GetAllApplications()
            .subscribe(result => {
                const projectsObservable: Observable<CabinInfo> = from(result);
                const projectsList = projectsObservable.pipe(groupBy(cabin => cabin.projectId, cabin => cabin)
                    , mergeMap(group => group.pipe(map(() => ({ projectId: group.key, cabins: group.pipe(toArray())})))));

            }, error => { console.error(error); });

But it does not work as I want, I expect something like

Array<number|CabinInfo[]>

all I am getting something complex like

Observable<{projectId: number, Observable<CabinInfo>[]}>

is there a way to convert it to simple array??

user4676340 · Accepted Answer · 2018-07-30 08:46:36Z

2

so naturally i would use rxjs/operators

You're living in a strange nature my friend ...

Use the Array.prototype.reduce function :

.subscribe(result => {
  this.groupedResults = result.reduce((p, n) => {
    if (!p[n.projectId]) { p[n.projectId] = []; }
    p[n.projectId].push(n);
    return p;
  }, {});
});

answered Jul 30, 2018 at 8:46

user4676340

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

Comments

Emanuel Pinho · Accepted Answer · 2018-07-30 09:11:09Z

1

Since you are using angular you can use async pipe in your html, so you don't need to subscribe your observable but you can let angular handles that logic. Instead, you can operators into your observable.

this.$applications = this.clientService.GetAllApplications()
        .pipe(
            groupBy(cabin => cabin.id),
            mergeMap(group => group.pipe(toArray()))
        );

In your html you'll have something like:

<div *ngFor="let c of $applications | async">

</div>

edited Jul 30, 2018 at 9:11

answered Jul 30, 2018 at 9:06

Emanuel Pinho

1361 silver badge6 bronze badges

Collectives™ on Stack Overflow

GroupBy 'rxjs/operators' to array with key and array of values in angular 6

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related