for those curious, i followed what was written here: https://github.com/lamisChebbi/ng-realtime-dashboard/blob/54ae8b658ad49e1ebbe5fc295a3e991613a4b88d/src/app/services/data.service.ts
this.beds$ = this.wrcService.getWrcBedsByFilter(this.wrcId, workerTypeId, blockId, buildingId, floorId, ['100000002'])
.pipe(
tap(bedsResponse => console.log(bedsResponse)),
filter(bedsResponse => bedsResponse != null),
flatMap(beds => beds),
map(bed => {
bed.numberOfBedsArray = Array.from({length: bed.qty}, (v, i) => i + 1);
return bed;
}),
mergeMap(beds => beds)
);
here
bedsResponse is of type Observable<Bed[]>
I am
flatting it to each Bed object
Or return Observablefrom()
mergeMap is the new one you should use, the other is just an allias
how to combine them all to Observable<Bed[]> again after transformation
this.wrcService.getWrcBedsByFilter().pipe(map(beds => beds.map(...))) should be enough right?
if you're not doing anything async inside map, you dont need Rx
and then do this?
@Dorus thank you this helped. And it works.
This message was deleted
1 reply
@freshdev1 The idea behind RxJs is that you have immutable event sources that you can reuse. You can still build any program you want, you just create new objects instead of modifying the existing ones. This means you map from an immutable source to a new immutable source. This avoids problems once you start multiplexing your sources, and makes your code more reusable. For your current program it probably wont make any difference, but by taking up this style you avoid problems down the road where you might be doing these things.
I want to merge them and subscribe so that I get both values in 1 subscribe and then make a call to a webservice
I read merge and combine latest. but both only emits 1 latest value per observable
do you guys know if their is any way of achieving this?
//set id if present
this.route.queryParams
.pipe(
map(param => param['id'])
)
.subscribe(paramValue => {
this.contractId = paramValue;
});applicationId
but the expectation is to subscribe an observable which gives me the values of both of them collectively like:
var idQueryParamObs = this.route.queryParams
.pipe(
filter(param => param['id'] != null),
map(param => param['id'])
);
var applicationIdQueryParamObs = this.route.queryParams
.pipe(
filter(param => param[applicationId'] != null),
map(param => param['applicationId'])
);
now how to combine and subscribe them?
@freshdev1 Here's a Stackblitz to demonstrate: https://stackblitz.com/edit/angular-ayggz1?file=src/app/list-selection-example.ts
@freshdev1 Example here: https://angular-ivy-zravkz.stackblitz.io/?id=1234&appId=5678
The second doesn't run. It keeps showing
Connecting to dev server at the bottom after I hit Run this project button.
@freshdev1 Sorry - yes, that was something else; my bad. Here it is: https://stackblitz.com/edit/angular-ivy-zravkz?file=src%2Fapp%2Fapp.component.ts
You're a champ. :P
ngOnInit() {
this.id$ = this.route.queryParams.pipe(map(params => params.id)); //<---- why no filter here
this.applicationId$ = this.route.queryParams.pipe(
filter(params => !!params.appId), //<----- but here any intended purpose of this?
map(params => params.appId)
);
const combinedIds$ = combineLatest([
this.id$.pipe(filter((id: string) => id !== null)), // and then here
this.applicationId$.pipe(
filter((applicationId: string) => applicationId !== null)
)
]);
this.result$ = combinedIds$.pipe(
map(([id, applicationId]: [string, string]) => ({
id,
applicationId
}))
);
this.result$.subscribe(result => {
console.log({ result });
});
}
}
additionally if you can also explain me to integrate switchMap with this, it would be great. what is a
Project function it expects. I am never able to implement it.
//set id if present
var idParam = this.route.queryParams
.pipe(
filter(params => !!params.id),
map(params => params.id)
);
var applicationParam = this.route.queryParams
.pipe(
filter(params => !!params.applicationId),
map(params => params.applicationId)
);
const combined = combineLatest([
idParam.pipe(filter((id: string) => id !== null)),
applicationParam.pipe(
filter((applicationId: string) => applicationId !== null)
)
]).pipe(
map(([id, applicationId] : [string, string]) => ({
id,
applicationId
}))
);
var result = combined.pipe(
switchMap(result => {
})
);
result.subscribe((contract: TenantContract) => {
});