Working with an Angular 4 Component that interacts with a Service to fetch data is a common scenario. Once the data is retrieved, it often needs to be transformed and filtered before being utilized. The prevailing method for this task is through the use of pipes.
Within my Component:
ngOnInit(): void {
this.suService.getShippingUnitTypes().subscribe(res => {
console.log("Getting shipping unit types: ", res);
});
}
Inside my service:
getShippingUnitTypes(): any {
const convertToJson = map(value => (value as any).json().XXETA_GRID_STATIC_LOV);
const filterShippingUnit = filter(value => (value as any).LOV_TYPE == "SHIPPING_UNIT");
return this.http.get(
this.constantsService.LOOKUP_COLUMN_BATCH_URL
).pipe(convertToJson, filterShippingUnit);
}
The service includes the following imports:
import { Injectable } from '@angular/core';
import { Http, Response, RequestOptions, Headers, RequestMethod } from '@angular/http';
import { Observable, pipe } from 'rxjs/Rx';
import { map, filter } from 'rxjs/operators';
While debugging, the code runs without errors but fails to reach the console.log() statement in the Component. Removing the .pipe() and returning the Observable logs the expected output without any transformations or filters being applied.
Being new to Rxjs and using Pipe, there's clearly a misunderstanding on my part.
Additional information reveals:
I incorporated tap into the pipe like this...
pipe(tap(console.log), convertToJson, tap(console.log), filterShippingUnit, tap(console.log))
Discovering tap proved to be beneficial. The first two console logs present the anticipated results. However, the third one, after the filterShippingUnit, doesn't produce any output whatsoever. It doesn't even log a null value.
Following the convertToJson operation, console.log displays an array of 28 objects. One particular object is:
{LOV_TYPE: "SHIPPING_UNIT", LOV_TAB_TYP_ITEM: Array(4)}
Expectations dictate that this object should undergo the filterShippingUnit filtration process.