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) => {
});
I removed the filters altogether. as I wanted them to be null, since one of them or both could be null. in case both are null, I don't make a call, but in other cases I do.
this.apiService
.getVigencia()
.pipe(
tap(() => this.getUserSuscriptions()),
filter(res => res.vigenciaIva != true)
)
.subscribe( // do something)
.......
// the function getUserSubcription() is his own best
getUserSuscriptions() {
this.apiService
.getStatus(requestData, this.userRut)
.pipe(
tap(res => {
this.showError =
Array.isArray(res.servicios) && res.servicios.length === 0;
}),
filter(() => this.showError === false)
)
.subscribe(
// process the everything
)
any help will be aprecciated
@makenoisewacamayo something like:
this.apiService.getVigencia().pipe(
mergeMap( data => this.apiService.getStatus( requestData, this.userRut ) )
.pipe(
filter( res => res.vigenciaIva !== true ),
map( res => ( [data, res] )
).subscribe(
finalData => {
console.log(finalData);
},
error => {
this.showError = error
}
);Hi there, I have this three methods:
getDateRange($event) {
this.dateRange = $event.range;
}
getMembers($event) {
this.highlightMembers = $event.selectedMembers;
}
isChecked($event) {
reurn this.statusSelected.concat(this.prioritySelected)
}I need to create an array from combination of all of this events, because at last I need to send an eventEmitter that contains this array created dynamically from those events, there is a way to do this with rxjs?
@SAGOlab Although I'd create a type definition for the object:
export interface EmitterType {
range: string; // or number or whatever
selectedMembers: Member[];
isChecked: boolean;
}
...
@Output someEventEmitter: EventEmitter<EmitterType> = new EventEmitter<EmitterType>();
...
someEventEmitter.emit({range: $event.range,
selectedMembers :$event.selectedMembers,
isChecked: this.statusSelected.concat(this.prioritySelected),
});...assuming I've correctly understood what you're asking.