Reactive Programming with RxJS and separating data into - arrays

Question

I am trying to work more reactively with Angular 15 and RxJS observables for a UI component. I only subscribe to the data in my component template (html). I have a service that receives data from an external system. The issue I have is the data may be received for multiple days and needs to be 'split' for the display usage.
In the display, there are individual components of data, that show the rows returned from the service call. The service makes an HTTP call to an external host.
this.Entries$ = this.Http_.get<Array<IEntry>>('http://host.com/api/entry');
This data is then an array of records with an EntryDate, and a structure of information (UserId, Description, TimeWorked, etc.). The external API sends all the records back as one flat array of data which is not guaranteed to be sorted, it comes back in a database order, which was the order records were entered. A sort might be needed for any processing, but I am not sure.
[
{ "EnterDate": 20221025, "UserId": "JohnDoe", "TimeWorked": 2.5, ... },
{ "EnterDate": 20221025, "UserId": "JohnDoe", "TimeWorked": 4.5, ... },
{ "EnterDate": 20221025, "UserId": "BSmith", "TimeWorked": 5, ... },
{ "EnterDate": 20221026, "UserId": "JohnDoe", "TimeWorked": 4, ... },
{ "EnterDate": 20221026, "UserId": "BSmith", "TimeWorked": 5, ... },
{ "EnterDate": 20221026, "UserId": "JohnDoe", "TimeWorked": 2, ... },
]
Currently, my HTML template loops through the Entries$ observable, when it was for just one day.
<ng-container *ngFor="let OneEntry of (Entries$ | async)">
<one-entry-component [data]=OneEntry />
</ng-container>
I want to be able to split my array of records into different datasets by EntryDate (and apparently user, but just EntryDate would work for now), similar to the groupBy(), but I do not know how to get to the internal record references, as it would be a map within the groupBy() I believe.
With the data split, I would then be looking to have multiple one-day-components on the page, that then have the one-entry-component within them.
|---------------------------------------------------------------|
| |
| |-One Day 1-------------###-| |-One Day 2-------------###-| |
| | | | | |
| | [ One Line ] | | [ One Line ] | |
| | [ One Line ] | | [ One Line ] | |
| | [ One Line ] | | [ One Line ] | |
| | [ One Line ] | | [ One Line ] | |
| | | | | |
| |---------------------------| |---------------------------| |
| |
| |-One Day 3-------------###-| |-One Day 4-------------###-| |
| | | | | |
| | [ One Line ] | | [ One Line ] | |
| | [ One Line ] | | [ One Line ] | |
| | [ One Line ] | | [ One Line ] | |
| | [ One Line ] | | [ One Line ] | |
| | | | | |
| |---------------------------| |---------------------------| |
| |
|---------------------------------------------------------------|
The 4 boxes would be there if there were 4 separate days in the response. If there were 2 different dates, then just show 2 dates, but this could be 5 or 6 even.
I would need an Observable that had the dates for splitting (and even users) and then be able to pass this as data to the one<one-day-component [data]=OneDateOneUser$ />. My component needs this so that I can count the time entries for the title, which I believe is a simple .pipe(map()) operation.
Within the one-day-component, I would then simply loop through the OneDateOneUser$ observable to extract individual records to send to the one-entry-component as I do currently.
I believe the RxJS groupBy is what I need. However, I am new to RxJS, and working with the inner array of data is not clear to me in the example.
If the data is individual records like the example, and not an array of data, then it does work using the example RxJS reference.
import { of, groupBy, mergeMap, reduce, map } from 'rxjs';
of(
{ id: 1, name: 'JavaScript' },
{ id: 2, name: 'Parcel' },
{ id: 2, name: 'webpack' },
{ id: 1, name: 'TypeScript' },
{ id: 3, name: 'TSLint' }
).pipe(
groupBy(p => p.id, { element: p => p.name }),
mergeMap(group$ => group$.pipe(reduce((acc, cur) => [...acc, cur], [`${ group$.key }`]))),
map(arr => ({ id: parseInt(arr[0], 10), values: arr.slice(1) }))
)
.subscribe(p => console.log(p));
// displays:
// { id: 1, values: [ 'JavaScript', 'TypeScript' ] }
// { id: 2, values: [ 'Parcel', 'webpack' ] }
// { id: 3, values: [ 'TSLint' ] }
However, simply changing the data in the of() to be an array (more like how my data comes back), breaks, and I am not sure how to fix it:
import { of, groupBy, mergeMap, reduce, map } from 'rxjs';
of(
[
{ id: 1, name: 'JavaScript' },
{ id: 2, name: 'Parcel' },
{ id: 2, name: 'webpack' },
{ id: 1, name: 'TypeScript' },
{ id: 3, name: 'TSLint' }
]
).pipe(
groupBy(p => p.id, { element: p => p.name }),
mergeMap(group$ => group$.pipe(reduce((acc, cur) => [...acc, cur], [`${ group$.key }`]))),
map(arr => ({ id: parseInt(arr[0], 10), values: arr.slice(1) }))
)
.subscribe(p => console.log(p));

Answer 1

What if you just turned that Array<IEntry> into a Record<number, IEntry> with something like lodash's group by and a map RxJS operator?
Then you can get the desired outcome with some flex-wrap and flex-row functionality on the template and just loop over the entries of the record:
Check this little working CodePen
import {groupBy} from 'lodash'
const fakeData = [
{ "EnterDate": 20221025, "UserId": "JohnDoe", "TimeWorked": 2.5, ... },
{ "EnterDate": 20221025, "UserId": "JohnDoe", "TimeWorked": 4.5, ... },
{ "EnterDate": 20221025, "UserId": "BSmith", "TimeWorked": 5, ... },
{ "EnterDate": 20221026, "UserId": "JohnDoe", "TimeWorked": 4, ... },
{ "EnterDate": 20221026, "UserId": "BSmith", "TimeWorked": 5, ... },
{ "EnterDate": 20221026, "UserId": "JohnDoe", "TimeWorked": 2, ... },
]
// Replace "of" with your API call
entriesByDate$: Observable<Record<number, IEntry>> = of(fakeData).pipe(
map(allEntries => groupBy(allEntries, 'EnterDate'))
)
<div *ngIf="entriesByDate$ | async as entries" class="flex flex-row flex-wrap">
<ng-container *ngFor="let [enterDate, entries] of Object.entries(entries)">
<entry-group-component [title]="enterDate" [data]="entries" />
</ng-container>
</div>
No need to import lodash if you care to write the grouping function yourself. Array#reduce should suffice:
function groupByEnterDate(entries: Array<IEntry>) {
return entries.reduce(
(acc, current) => {
const key = current.EnterDate
const groupedByKey = acc[key] ?? []
return { ...acc, [key]: [...groupedByKey, current] }
},
{}
)
}