Here is a simplified and clear version of my code:
connect(): Observable<Customer[]> {
const displayDataChanges = [
this._customerDatabase.dataChange,
this._filterChange,
this._sort.mdSortChange,
this._paginator.page
];
return Observable.merge(...displayDataChanges).map(() => {
let data = this._customerDatabase.data.slice();
data = this.getFilteredData(data);
data = this.getSortedData(data);
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
return data.splice(startIndex, this._paginator.pageSize);
});
}
This connect() function will provide an Observable array of Customers.
The following section sets up an array of Observables:
const displayDataChanges = [
this._customerDatabase.dataChange,
this._filterChange,
this._sort.mdSortChange,
this._paginator.page
];
Whenever any of these Observables emit data, it triggers a change in the Array of Customers. This includes when loading data, changing filters, selecting a sorting method, or moving to another page.
All these changes are merged together in order to compose and assemble the final data that needs to be returned. However, this approach is not very efficient as it does not differentiate between which specific observable has emitted new data...
How can I enhance this process and identify the specific observable that triggered the change? (See Pseudo code below)
return Observable.merge(...displayDataChanges).map(() => {
**[ALWAYS]**
let data = this._customerDatabase.data.slice();
**[IF SORTING HAS CHANGED]**
data = this.getSortedData(data); /* After updating the dataSet */
**[IF FILTER HAS CHANGED]**
data = this.getFilteredData(data);
**[ALWAYS]**
const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
return data.splice(startIndex, this._paginator.pageSize);
});