How to call actual service instead of local JSON in Getting Started Demos complete example (search,sort,page,and filter) - ng-bootstrap

Question

Working with complete table example (with sorting, filtering and pagination) that simulates a server call using a JSON constant.
I am trying to make it call a real API that returns JSON instead of a local constant.
I was successful in changing the code from the demo from using countries to suppliers. For example countries.ts is suppliers.ts, country.ts is supplier.ts, and country.service is supplier.service.
That works with no problems, but I want to remove the countries.ts (suppliers.ts in my case), export the JSON and replace it with a http.get call to a local API service.
Here's a sample of a working code from the API service that I am trying to call:
getSuppliers(): Observable<SupplierVM[]> {
return this.http.get<SupplierVM[]>(apiUrl+'supplier')
.pipe(
tap(heroes => console.log('fetched Suppliers')),
catchError(this.handleError('getSuppliers', []))
);
}
Here is a sample of a working call from within an Angular component:
allSuppliers:Observable<SupplierVM[]>;
this.allSuppliers=this.api.getSuppliers();
This is the method that does the work in the demo (the only difference is that I am using suppliers instead of countries)
private _search(): Observable<SearchResult> {
const {sortColumn, sortDirection, pageSize, page, searchTerm} = this._state;
//1. sort
let suppliers = sort(SUPPLIERS, sortColumn, sortDirection);
//2. filter
suppliers = suppliers.filter(country => matches(country, searchTerm/*, this.pipe*/));
const total = suppliers.length;
//3. paginate
suppliers = suppliers.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize);
return of({suppliers, total});
}
This works when I call suppliers from the import statement, but I want to replace the suppliers from the sort method to something like this.allSuppliers (kind of like the sample method call above).
//1. sort
let suppliers = sort(this.allSuppliers, sortColumn, sortDirection);
Everything works when using local imported constant composed of JSON and should work just the same when calling actual service because the JSON response is the exact same.

Answer 1

I had a go at this and ended up implementing a switchable server-side/client-side sorting/pagination/filtering system (Angular 12).
Base Service: All services are derived from this, even ones without sorting/pagination/filtering.
import { HttpClient, HttpParams } from "#angular/common/http";
import { Observable } from "rxjs";
export abstract class BaseService<T> {
constructor(protected _http: HttpClient, protected actionUrl: string) {
}
getAll(params?: HttpParams): Observable<T[]> {
if (params)
return this._http.get(this.actionUrl, { params: params }) as Observable<T[]>;
return this._http.get(this.actionUrl) as Observable<T[]>;
}
getSingle(id: number, params?: HttpParams): Observable<T> {
if (params)
return this._http.get(`${this.actionUrl}/${id}`, { params: params }) as Observable<T>;
return this._http.get(`${this.actionUrl}/${id}`) as Observable<T>;
}
push(content: any, id: number) {
if (id === 0)
return this._http.post<any>(`${this.actionUrl}`, content);
return this._http.post<any>(`${this.actionUrl}/${id}`, content);
}
post(content: any) {
return this._http.post<any>(`${this.actionUrl}`, content);
}
}
Sortable Service: Services with a sortable/paginated/filtered result set are always derived from this base service. Derived services need to implement their own matching algorithm (_matches()).
import { HttpClient } from "#angular/common/http";
import { BehaviorSubject, Observable, Subject } from "rxjs";
import { BaseService } from "./base.service";
import { SearchResult, SearchState } from "#app/common/_models";
import { SortDirection } from '#app/common/_directives';
import { debounceTime, delay, switchMap, tap } from "rxjs/operators";
export abstract class SortableService<T> extends BaseService<T> {
private _loading$ = new BehaviorSubject<boolean>(true);
private _search$ = new Subject<void>();
private _items$ = new BehaviorSubject<T[]>([]);
private _total$ = new BehaviorSubject<number>(0);
protected _state: SearchState = {
page: 1,
pageSize: 10,
searchTerm: '',
sortColumn: '',
sortDirection: ''
};
constructor(protected _http: HttpClient, protected actionUrl:string) {
super(_http, actionUrl);
this._search$.pipe(
tap(() => this._loading$.next(true)),
debounceTime(200),
switchMap(() => this._search()),
tap(() => this._loading$.next(false))
).subscribe(response => {
this._items$.next(response.result);
this._total$.next(response.total);
});
this._search$.next();
}
get items$() { return this._items$.asObservable(); }
get total$() { return this._total$.asObservable(); }
get loading$() { return this._loading$.asObservable(); }
get page() { return this._state.page; }
get pageSize() { return this._state.pageSize; }
get searchTerm() { return this._state.searchTerm; }
set page(page: number) { this._set({ page }); }
set pageSize(pageSize: number) { this._set({ pageSize }); }
set searchTerm(searchTerm: string) { this._set({ searchTerm }); }
set sortColumn(sortColumn: string) { this._set({ sortColumn }); }
set sortDirection(sortDirection: SortDirection) { this._set({ sortDirection }); }
private _set(patch: Partial<SearchState>) {
Object.assign(this._state, patch);
this._search$.next();
}
protected _compare(v1: string | number | boolean | T[keyof T], v2: string | number | boolean | T[keyof T]) {
return v1 < v2 ? -1 : v1 > v2 ? 1 : 0;
}
private _getValue<T>(obj: T, column: string) {
var parts = column.split('.');
var result : any = obj;
for (let part of parts) {
for (let res in result) {
if (res === part)
result = result[res];
}
}
return result;
}
protected _sort(items: T[], column: string, direction: string): T[] {
if (direction === '' || column === '')
return items;
return [...items].sort((a, b) => {
var aa = this._getValue(a, column);
var bb = this._getValue(b, column);
const res = aa === undefined ? -1 : bb === undefined ? 1 : this._compare(aa, bb);
return direction === 'asc' ? res : -res;
});
}
protected abstract _matches(items: T, term: string) : boolean;
protected abstract _search(): Observable<SearchResult<T>>;
}
Client-Sortable Service: If the list manipulation happens in the client, derive the services from this one. I use a simple 1-minute cache to hold data.
import { HttpClient } from "#angular/common/http";
import { Observable, of } from "rxjs";
import { mergeMap } from "rxjs/operators";
import { SortableService } from "./sortable.service";
import { SearchResult } from "#app/common/_models";
export abstract class ClientSortableService<T> extends SortableService<T> {
cache?: T[];
cacheUpdatedIn?: Date;
constructor(protected _http: HttpClient, protected actionUrl: string) {
super(_http, actionUrl);
}
private getCache(): Observable<T[]> {
var expected = new Date();
if (this.cacheUpdatedIn !== undefined) {
expected = this.cacheUpdatedIn;
expected.setMinutes(expected.getMinutes() + 1);
}
//Search again.
if (this.cache == undefined || this.cache.length == 0 || expected == undefined || expected < new Date())
{
this.cacheUpdatedIn = new Date();
return this.getAll();
}
return of(this.cache || []);
}
protected _search(): Observable<SearchResult<T>> {
return this.getCache().pipe(mergeMap(items => {
this.cache = items;
//1: Sort.
let siteGroups = this._sort(items, this._state.sortColumn, this._state.sortDirection);
//2: Filter.
siteGroups = siteGroups.filter(group => this._matches(group, this._state.searchTerm));
const total = siteGroups.length;
//3: Paginate.
siteGroups = siteGroups.slice((this._state.page - 1) * this._state.pageSize, (this._state.page - 1) * this._state.pageSize + this._state.pageSize);
return of({ result: siteGroups, total: total });
}));
}
}
Server-Sortable Service: If the list manipulation happens in the server, derive the services from this one. The api need to handle the results before returning it.
import { HttpClient } from "#angular/common/http";
import { Observable, of } from "rxjs";
import { SortableService } from "./sortable.service";
import { SearchResult } from "#app/common/_models";
export abstract class ServerSortableService<T> extends SortableService<T> {
constructor(protected _http: HttpClient, protected actionUrl: string) {
super(_http, actionUrl);
}
protected _search(): Observable<SearchResult<T>> {
return super.post(this._state);
}
}
Custom Service: This custom service derives from the client-side base service. See that I need to declare a method that is used for the filtering, to select which fields to compare to.
#Injectable({ providedIn: 'root' })
export class ExampleService extends ClientSortableService<Example> {
constructor(protected _http: HttpClient) {
super(_http, `${environment.apiUrl}/sites`);
}
protected _matches(items: Example, term: string): boolean {
return items.displayName.toLowerCase().includes(term.toLowerCase());
}
}

Answer 2

So I beat my head against this for over a day.. I had it but I was doing something silly that broke pagination.
Anyway, what I did was all client-side since my data isn't going to be huge. In the constructor I wrapped the search.next() call in the subscribe of the API call. I also assigned the results to an array there. That way I had data when the search.next() was called. That array is what the actual function manipulates.
If you can follow my bad code here are the relevant snippets:
Declare a new variable to hold the results.
private myData: MyDataType[] = [];
In the constructor add your API call to get your data.
this.httpClient.get<MyDataType[]>('GetMyData').subscribe(data => {
this.myData = data;
this._search$.next();
});
This will load your data client-side to be used by the search function and trigger the initial call to said function.
And finally, in the search function, use your newly created and data-loaded variable for sorting and filtering.
//1. Sort
let theData = sort(this.myData, sortColumn, sortDirection);
I don't know what I was trying to do at first.. I went around the world and googled for several hours and found nothing that made it seem so simple. Just a few lines of code was all it took!