I'm well aware that there are numerous questions with similar titles and issues. I've dedicated the past day and a half to reading and experimenting with potential solutions, but unfortunately, none have worked for me. My situation varies slightly, and I am using a newer version of Angular.
The challenge I am facing involves implementing pagination for data displayed on a chart (built using chart.js through ng2-charts). Below is the code snippet showcasing how it currently looks:
<div class="paginable-area" [class.loading]="chartLoading">
<app-line-chart *ngIf="!tableError" [lineChartData]="chartData" [lineChartLabels]="chartLabels"></app-line-chart>
<div class="page-controls">
<button class="button" (click)="previousChartPage()" [disabled]="currentChartPage <= 1">◀</button>
<button class="button" (click)="nextChartPage()">▶</button>
</div>
</div>
Upon initial page load, the first page displays correctly and appears as expected. However, upon clicking the button to view another page, an error is triggered in the console:
TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
RxJS 13
Angular 16
RxJS 30
getAggregates dashboard.component.ts:144
nextChartPage dashboard.component.ts:92
DashboardComponent_Template_button_click_9_listener dashboard.component.html:10
Angular 22
DashboardComponent_Template dashboard.component.html:10
Angular 13
RxJS 3
Upon clicking the "Next Page" button, the following methods are invoked in sequence:
public nextChartPage(): void {
this.currentChartPage += 1;
this.getAggregates();
}
// ...
private getAggregates(): void {
// Code logic
}
// ...
// Additional code snippets
The getAggregates() method is called each time a new chart page is requested, including the initial chart loading. The first call succeeds, but subsequent calls encounter errors and result in empty objects being returned.
I have a table on the same page displaying data from the same API and paginated in the same manner, without any issues. The problem most likely lies within the map() function, but I have been unable to pinpoint it.
- I have verified all imports and ensured there are no incorrect rxjs internal import statements.
- I have attempted to isolate the source of the error by systematically commenting out portions of the pipe operations without success.
- Trying different return methods using rxjs's
of()has led to nested Observables instead of expected results.
Being relatively new to Angular and rxjs, I suspect there might be mistakes in my implementation. Any assistance or guidance would be greatly appreciated.
EDIT: After modifying the service method, the error message changed when attempting to load the next page of the chart. The current error indicates:
TypeError: r.map is not a function
getAggregateStats stats.service.ts:75
RxJS 9
Angular 16
RxJS 28
getAggregates dashboard.component.ts:143
nextChartPage dashboard.component.ts:92
DashboardComponent_Template_button_click_9_listener dashboard.component.html:10
Angular 22
Dashboar... Something indicates that while the initial pipe operation functions as intended, consecutive calls receive a non-array response, causing the absence of a map() function. Yet, inspecting the console output reveals the correct content in the second request!
// First request, upon page load:
GET https://my-api.xxx/stats?page=1 [HTTP/1.1 200 OK 249ms]
[{"successful":"1","unsuccessful":"1","day":"2020-12-15"},{"successful":"1","unsuccessful":"0","day":"2020-12-14"}]
// Second request, requesting the next page
GET https://my-api.xxx/stats?page=2 [HTTP/1.1 200 OK 249ms]
{"2":{"successful":"2","unsuccessful":"1","day":"2020-12-11"},"3":{"successful":"3","unsuccessful":"6","day":"2020-12-10"}}