My goal is to send multiple requests to an API, merge and sort the results, and then assign them to the this.products$ observable. The current code mostly accomplishes this by combining all the results into one list.
The fetchIds() method retrieves parameters from a store. sliceToArrays(any[], number) takes these parameters and divides them into smaller chunks. I do this to prevent the URL from becoming too long for the GET request with this.api.listProducts([], ''), as URLs have a maximum character limit that can be exceeded with too many IDs.
However, I'm facing an issue where the merged results are not sorted properly; it sorts two lists separately before merging them, resulting in [A, B, C, A, B, C] instead of the desired [A, A, B, B, C, C].
ngOnInit() {
this.pageSize = 100;
this.products$ = this.fetchIds().pipe(
mergeMap(ids =>
forkJoin(this.sliceToArrays(ids, this.pageSize).map(idsList => this.api.listProducts(idsList, 'watchlist'))).pipe(
mergeMap(products => merge(...products)),
toArray(),
map(products => sortBy(products, ['inventoryStatus', 'authorLastFirst']))
))); }
sliceToArrays(input: any[], maxSliceSize: number): any[][] {
const slices = Math.floor((input.length + maxSliceSize - 1) / maxSliceSize);
const collection: any[][] = [];
for (let i = 1; i <= slices; i++) {
collection.push(input.slice((i - 1) * maxSliceSize, i * maxSliceSize));
}
return collection; }
fetchSkus() {
return this.watchListStore.items.pipe(
filter(watchlist => watchlist !== null),
map(watchlist => watchlist.map(i => i.id))
); }
I'm seeking guidance on how to resolve this issue. I've been experimenting with different solutions for days, but Angular and TypeScript are not my areas of expertise.