In my app i have something like:
this._personService.getName(id)
.concat(this._documentService.getDocument())
.subscribe((response) => {
console.log(response)
this.showForm()
});
//Output:
// [getnameResult]
// [getDocumentResult]
// I want:
// [getnameResult][getDocumentResult]
Then i get two separated results, first of the _personService and then the _documentService. How can I wait for both results before call this.showForm() to finish an then manipulate the results of each one.
Last Update: Mar, 2022.
RxJS v7: combineLatestWith
From reactiveX documentation:
Whenever any input Observable emits a value, it computes a formula using the latest values from all the inputs, then emits the output of that formula.
// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
name$.pipe(
combineLatestWith($document)
)
.subscribe(([name, document]) => {
this.name = name;
this.document = pair.document;
this.showForm();
})
(Deprecated) RxJS v6 combineLatest()
From reactiveX documentation:
Whenever any input Observable emits a value, it computes a formula using the latest values from all the inputs, then emits the output of that formula.
(Update: Feb, 2021):
// Deprecated (RxJS v6)
// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
name$.combineLatest(document$, (name, document) => {name, document})
.subscribe(pair => {
this.name = pair.name;
this.document = pair.document;
this.showForm();
})
(alternate syntax): combineLatest(observables)
// Deprecated (RxJS v6)
// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
combineLatest(name$, document$, (name, document) => ({name, document}))
.subscribe(pair => {
this.name = pair.name;
this.document = pair.document;
this.showForm();
})
zip vs combineLatest
(Update: Oct, 2018)
I previously suggested the use of zip method. However, for some use cases, combineLatest has a few advantages over zip. So it is important to understand the differences.
CombineLatest emits the latest emitted values from observables. While zip method emits the emitted items in sequence order.
For example if observable #1 emits its 3rd item and observable #2 has emitted its 5th item. The result using zip method will be the 3rd emitted values of both observables.
In this situation the result using combineLatest will be the 5th and 3rd. which feels more natural.
Observable.zip(observables)
(Original answer: Jul, 2017) Observable.zip method is explained in reactiveX documentation:
Combines multiple Observables to create an Observable whose values are calculated from the values, in order, of each of its input Observables.
// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
Observable
.zip(name$, document$, (name: string, document: string) => ({name, document}))
.subscribe(pair => {
this.name = pair.name;
this.document = pair.document;
this.showForm();
})
a side note (applies for both methods)
The last parameter, where we have provided a function, (name: string, document: string) => ({name, document}) is optional. You can skip it, or do more complex operations:
If the latest parameter is a function, this function is used to compute the created value from the input values. Otherwise, an array of the input values is returned.
So if you skip the last part, you get an array:
// Observables to combine
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
Observable
.zip(name$, document$)
.subscribe(pair => {
this.name = pair['0'];
this.document = pair['1'];
this.showForm();
})
Use forkJoin() method of observables. Check this link for reference
From the RXJS docs
This operator is best used when you have a group of observables and only care about the final emitted value of each. One common use case for this is if you wish to issue multiple requests on page load (or some other event) and only want to take action when a response has been receieved for all. In this way it is similar to how you might use Promise.all
forkJoin([character, characterHomeworld]).subscribe(results => {
// results[0] is our character
// results[1] is our character homeworld
results[0].homeworld = results[1];
this.loadedCharacter = results[0];
});
Code taken from: https://coryrylan.com/blog/angular-multiple-http-requests-with-rxjs
The RxJS Operators for Dummies: forkJoin, zip, combineLatest, withLatestFrom helped me a lot. As the name states it describes the following combination operators:
ForkJoin
zip
combineLatest
withLatestFrom
Any of them could be the thing you are looking for, depends on the case. Check the article for more info.
Improvement of Hamid Asghari answer which use direct arguments decomposition and automatically add types (when you use typescript)
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
combineLatest([name$, document$]).subscribe(([name, document]) => {
this.name = name;
this.document = document;
this.showForm();
});
BONUS: You can also handle errors using above approach as follows
import { combineLatest, of } from 'rxjs';
//...
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
combineLatest([
name$.pipe( catchError( () => of(null as string ) ) ),
document$.pipe( catchError( () => of(null as Document) ) ), // 'Document' is arbitrary type
]).subscribe(([name, document]) => {
this.name = name; // or null if error
this.document = document; // or null if error
this.showForm();
});
June 2021
With rxjs 6.6.7
Use combineLatest like this otherwise is deprecated
combineLatest([a$ , b$]).pipe(
map(([a, b]) => ({a, b})) //change to [a , b] if you want an array
)
Also see #nyxz post
zip - the love birds, always work as a team, triggers only when all
observables return new values
combineLatest - the go dutch, start trigger once all observables
return new values, then wait for no man, trigger every time when
either observable return new value.
withLatestFrom - the master slave, master first waits for slave, after
that, action get triggered every time only when master return new
value.
forkJoin - the final destination, trigger once when all observables
have completed.
From : https://scotch.io/tutorials/rxjs-operators-for-dummies-forkjoin-zip-combinelatest-withlatestfrom/amp
Have a look at the 'combineLatest' method, it might be appropriate here.
http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-combineLatest
const { Observable } = Rx
const name$ = this._personService.getName(id);
const document$ = this._documentService.getDocument();
Observable
.combineLatest(name$, document$, (name, document) => ({ name, document }))
.first() // or not, implementation detail
.subscribe(({ name, document }) => {
// here we have both name and document
this.showForm()
})
For me this sample was best solution.
const source = Observable.interval(500);
const example = source.sample(Observable.interval(2000));
const subscribe = example.subscribe(val => console.log('sample', val));
So.. only when second (example) emit - you will see last emited value of first (source).
In my task, I wait form validation and other DOM event.
You can use 'zip' or 'buffer' like the following.
function getName() {
return Observable.of('some name').delay(100);
}
function getDocument() {
return Observable.of('some document').delay(200);
}
// CASE1 : concurrent requests
Observable.zip(getName(), getDocument(), (name, document) => {
return `${name}-${document}`;
})
.subscribe(value => console.log(`concurrent: ${value}`));
// CASE2 : sequential requests
getName().concat(getDocument())
.bufferCount(2)
.map(values => `${values[0]}-${values[1]}`)
.subscribe(value => console.log(`sequential: ${value}`));
Related
I have a function _populateData that creates a new list of properties from another list of properties.
There is an observable getOwnerForProperty that returns the owner's value.
//Get single owner observable
public getOwnerForProperty(prop: any){
return this._manageOwnerService._getOwnersOfProperty(prop).pipe(map(o => o[0]))
How can I call the observable from within the .map() function to obtain the observable's value and attach it to the new object as seen below?
In my opinion, it would not be a good idea to subscribe getOwnerForProperty function in the .map(). Please advise on the best way to approach this following best practices.
/**
* Returns the active properties data.
*
* #param props - The property list.
* #returns An array of properties
*/
private _populateData(props: Property[]) {
return
const populated = props
.filter(prop => !prop.isArchived)
.map((p: Property) => {
// refactoring here
this.getOwnerForProperty(p).pipe(
map((owner: Owner) => {
const obj = {
propertyName: p.info.name.toUpperCase(),
owner: owner.name,
createdOn: p.createdOn ? __FormatDateFromStorage(p.createdOn) : ''
}
return obj;
})
)
}
)
return populated;
}
}
It's not entirely clear from your question what exactly you are trying to achieve, but here is my solution, so you will hopefully get the idea:
filter for the properties you want to "enrich".
use forkJoin to create an array of observables and wait for all of them to complete.
map each property to the observable you want to wait for.
map the result of the observable to the initial property and enrich it with the owner object.
forkJoin returns an observable which will basically emit a single array of enriched objects and complete. If you wish to await this, you can wrap this in lastValueFrom operator, like await lastValueFrom(forkJoin(...))
function _populateData(props: Property[]) {
const propertiesToPopulate = props.filter((prop) => !prop.isArchived);
forkJoin(
propertiesToPopulate.map((p: Property) => {
return getOwnerForProperty(p).pipe(
map((owner) => ({
...p,
owner,
}))
);
})
);
}
I have two subscriptions item as you see in the image:
one of them is search input another one is a selection filter.
I want to change the result when one or both of them change.
I use Rxjs combineLatest so when both of them or search input change, everything is ok, but when changing the Partner type at the first, the response does not change.
ngOnInit() {
super.ngOnInit();
this.getAllPartners();
combineLatest([this.searchPartnerFc.valueChanges, this.filterFc.valueChanges])
.pipe(
switchMap(([search, filter]) => {
let partnersBySearch = this.getSearchResult(search);
let partnersByFilter = this.getFilterResult(filter);
this.partners = partnersBySearch.filter(item => partnersByFilter.indexOf(item) > 0);
return this.partners;
}),
)
.subscribe();
}
getFilterResult(filterKey: string) {
if (filterKey == 'All') return this.allPartners;
else return this.allPartners.filter(partner => partner.partnerType == filterKey);
}
getSearchResult(searchString: string) {
return this.allPartners.filter(x => x.partnerName.toLowerCase().includes(searchString));
}
You can achieve your desired result by providing a default emission for each of your source observables using startWith:
combineLatest([
this.searchPartnerFc.valueChanges.pipe(startWith('')),
this.filterFc.valueChanges.pipe(startWith('All'))
]).pipe(
...
);
I think it's not working because of the nature of the combineLatest operator. It will only emit when both of the observables have emitted an initial value first. So when only the first observable emits, and the second doesn't, it will not do anything:
https://www.learnrxjs.io/learn-rxjs/operators/combination/combinelatest
I think you need a merge operator here:
https://www.learnrxjs.io/learn-rxjs/operators/combination/merge
Also please take a look here on this thread:
How to 'wait' for two observables in RxJS
I am sure a waterfall observable isn't a thing, but it best describes what I want to do.
Code
Given is a map of paths and behavior objects that represent their content.
const pathmap = new Map<string, BehaviorSubject<string>>();
pathmap.set("foo.txt", new BehaviorSubject<string>("file is empty"));
pathmap.set("bar.txt", new BehaviorSubject<string>("file is empty"));
Also given is a BehaviourSubject that contains the active path.
const activePath = new BehaviorSubject<string | null>(null);
...
activePath.next('bar.txt');
What I need:
I want to create a single chained Observable that triggers an event when:
A) The active file path got changed.
B) The content of a file got changed.
What I have so far:
https://codesandbox.io/s/bold-dream-3hfjdy?file=/src/index.ts
function getFileContentObservable(): Observable<string> {
return currentFile.asObservable()
.pipe(map((path: string) => pathmap.get(path).asObservable()))
.pipe(map((content: string) => `<h1>${content}</h1>`));
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Type 'string' is not assignable to type 'Observable<string>'
}
How would I chain this?
Try switchMap Operator.
function getFileContentObservable(): Observable<string> {
return currentFile.asObservable().pipe(
filter(Boolean),
switchMap((path: string) => pathmap.get(path).asObservable()),
map((content: string) => `<h1>${content}</h1>`)
);
}
I have a validation process which validates data in the table row by row. Because each row validation uses a shared resource, access to it must be serialized.
public validate():Observable<boolean>{
const rowValidations:Observable<boolean>[] = dataRows.map(row=>this.validateSingleRow(row);
return forkJoin(...rowValidations).pipe(
map(results=>results.every(r=>r))
)
}
If I understand correctly, forkJoin will not wait for each observable to finish before subscribing to the next one like concat would so that will probably fail. concat on the other hand serializes all the observables into a single stream.
How can I get a subscription order like with concat but have an array of results of each observable like with forkJoin effectively synchronizing execution of each inner observable (like Javas synchronzied validateSingleRow)?
Actually, if you know that each this.validateSingleRow(row) will always emit only once you can use toArray():
concat(...rowValidations).pipe(
toArray(),
);
concat will guarantee correct order and toArray() will collect all emissions into a single array and reemit it after the source Observable completes.
Otherwise, if validateSingleRow might emit multiple times and you always want only its last value you could use scan:
const indexedRowValidations = rowValidations.map((o, index) => o.pipe(
map(result => [index, result]),
));
concat(...indexedRowValidations ).pipe(
scan((acc, [index, result]) => {
acc[index] = result;
return acc;
}, {}),
takeLast(1),
);
(I didn't test it but I believe you get the idea :)).
Would something like this do the trick for you?
class SomeClass {
dataRows = [1, 2, 3];
public validate(): Observable<boolean[]> {
return this.resolveSequentially(this.dataRows);
}
private validateSequentially<T>([cur, ...obs]: T[]): Observable<boolean[]> {
return cur
? this.validateSingleRow(cur).pipe(
switchMap((x) =>
this.validateSequentially(obs).pipe(map((arr) => [x, ...arr]))
)
)
: of([]);
}
// Mock
private validateSingleRow(cur: any) {
console.log(`Validating ${cur}...`);
return of(Math.floor(Math.random() * 2) === 1).pipe(
delay(1000),
tap((x) => console.log(`Result: ${x}`))
);
}
}
const obj = new SomeClass();
obj.validate().subscribe(console.log);
StackBlitz demo
Solution that meets my requirement is simpler than one might think. I have used concat with toArray() like this
const rowValidations:Observable<boolean>[] = dataRows.map(row=>defer(()=>this.validateSingleRow(row));
return concat(...rowValidations).pipe(
toArray(),
map(results=>results.every(r=>r))
)
so validateSingleRow is executed one by one and toArray transforms boolean stream into array of boolean.
I would like to create an observable which takes N observable sources and transform them whith an N-ary function. The onNext() of this observable will call this function whenever one of the source observables emits an item, like this: f(null,null,null,o3.val,null,null) where o3 is the source which just emitted a value.
Is like the combineLatest where the f is called with the last emitted values from all the sources combined together but here in the f we get null value for all the others.
The body of the f could act like a switch:
function f(v1,v2,...vn) {
if (v1) { ... }
else if(v2) { ... }
}
Is this possible? There are other way round for accomplish this behaviour?
You may want to think about something like this
const obsS1 = obsSource1.pipe(map(data => [data, 'o1']));
const obsS2 = obsSource2.pipe(map(data => [data, 'o2']));
....
const obsSN = obsSourceN.pipe(map(data => [data, 'oN']));
merge(obs1, obs2, ..., obsN)
.subscribe(
dataObs => {
// do what you need to do
// dataObs[0] contains the value emitted by the source Observable
// dataObs[1] contains the identifier of the source Observable which emitted last
}
)