GroupBy RxJs for Observable<Object[]>

Question

I have the following entries with the type Observable<Event[]>:

[{
   "_id": 1,
   "_title": "Testveranstaltung 1",
   "_startDate": "2019-05-29T07:20:00.000Z",
   "_endDate": "2019-05-29T08:00:00.000Z",
   "_isAllDay": false
 }, {
   "_id": 2,
   "_title": "Testveranstaltung 2",
   "_startDate": "2019-06-10T07:00:00.000Z",
   "_endDate": "2019-08-02T07:00:00.000Z",
   "_isAllDay": false
 }, {
   "_id": 3,
   "_title": "Testveranstaltung 3",
   "_startDate": "2019-06-12T07:00:00.000Z",
   "_endDate": "2019-06-12T10:00:00.000Z",
   "_isAllDay": false
}]

The array should be made to a two dimensional array that is grouped by the month of startDate (moment.js-Object). I want to look the array like this:

[{
        "May 2019": [
            [
                "_id": 1,
                "_title": "Testveranstaltung 1",
                "_startDate": "2019-05-29T07:20:00.000Z",
                "_endDate": "2019-05-29T08:00:00.000Z",
                "_isAllDay": false
            ]
        ]
    },
    {
        "June 2019": [
            [
                "_id": 2,
                "_title": "Testveranstaltung 2",
                "_startDate": "2019-06-10T07:00:00.000Z",
                "_endDate": "2019-08-02T07:00:00.000Z",
                "_isAllDay": false
            ],
            [
                "_id": 3,
                "_title": "Testveranstaltung 3",
                "_startDate": "2019-06-12T07:00:00.000Z",
                "_endDate": "2019-06-12T10:00:00.000Z",
                "_isAllDay": false
            ]
        ]
    }
]

with this code I don't get the right result yet:

//Observable<Event[]> is returned by a function
.pipe(groupBy((events: Event[]) => events.map((event: Event) => event.startDate.format('MMMM YYYY')), (events: Event[]) => events.map((event: Event) => event.startDate.format('DD/MM/YYYY'))),
mergeMap(group => zip(of(group.key), group.pipe(toArray())))
.subscribe((data) => { 
      console.log(data); 
});

Here's what it outputs with the code above:

[
  [May 2019, June 2019, June 2019], 
  [
    [29/05/2019, 10/06/2019, 12/06/2019]
  ]
]

Thanks in advance!

Answer 1

You can do the following -

const data = [{
   "_id": 1,
   "_title": "Testveranstaltung 1",
   "_startDate": "2019-05-29T07:20:00.000Z",
   "_endDate": "2019-05-29T08:00:00.000Z",
   "_isAllDay": false
 }, {
   "_id": 2,
   "_title": "Testveranstaltung 2",
   "_startDate": "2019-06-10T07:00:00.000Z",
   "_endDate": "2019-08-02T07:00:00.000Z",
   "_isAllDay": false
 }, {
   "_id": 3,
   "_title": "Testveranstaltung 3",
   "_startDate": "2019-06-12T07:00:00.000Z",
   "_endDate": "2019-06-12T10:00:00.000Z",
   "_isAllDay": false
}];

from(data).pipe(
  groupBy(d => d['_startDate'], p => p),
  mergeMap(group => zip(of(group.key), group.pipe(toArray())))
).subscribe(console.log);

See the following stackblitz -

https://stackblitz.com/edit/rxjs-groupby-key-vals-hsj3a7?file=index.ts&devtoolsheight=100

You need to adjust format the date as per your need.