I am accesing an api endpoint which atm retrieves > 1000 data objects and returns them to the user.
I don't think this is efficient, as only 30 objects get viewed at once.
Is there a way to load these objects more efficiently (i.e. 30 at a time), especially as I have integrated it with ngx-datatable.
My api allows for this... just need to add the following parameters to URL:
Paginated results (set page=${pageNumber} and limit=${maxResultsOnPage}) e.g. To limit results to 5 sermons a page and get the 2nd page:
curl --request GET \
--header 'content-type: application/json' \
--url 'http://localhost:8080/sermon?limit=5&page=2'
sermon.component.ts
public getAllSermons() {
this.sermonSubscription = this.apiService.getAllSermons().subscribe((data: Array<object>) => {
this.sermons = data;
this.totalCount = Object.keys(this.sermons).length;
this.logger.debug(`${data.length} sermons loaded`);
this.isSermonsLoaded = true;
});
}
sermon.component.html
<ngx-datatable class="material fullscreen" [rows]="sermons" [loadingIndicator]="loadingIndicator"
[selected]="selected" [selectionType]="'single'" [columnMode]="'force'" [headerHeight]="50"
[footerHeight]="50" [rowHeight]="'auto'" [limit]="30" (select)='onSelect($event)'>
<ngx-datatable-column name="Date" [width]="80"></ngx-datatable-column>
<ngx-datatable-column name="Speaker" [width]="200"></ngx-datatable-column>
<ngx-datatable-column name="Name" [width]="600"></ngx-datatable-column>
</ngx-datatable>
api.service.ts
public getAllSermons() {
return this.httpClient.get(`${this.apiUrl}/sermon?orderBy=date&sortAscending=false`).pipe(map((data: any) => data.data)
);
}
