TheUnreal TheUnreal - 18 days ago 6
Javascript Question

Get data once from 2 observables

I have 2 observables, and I need to get each observable data only one time.

What I did is subscription inside a subscription, although they can be executed in the same time (in parallel).

let table = this.af.database.object('tables');
table.subscribe((tableData) => {
let section_seats = this.af.database.object('sections').take(1)
.subscribe((sectionData) => {
//Here I'm Using tableData & sectionData
});
});


The code above works great, but they are not executed in the same time although they can.

How I can execute both of the observables in the same time then use the data received from both of them?

Update: Using forkJoin() doing nothing (no console log from the following code)

var source = Observable.forkJoin(
this.af.database.object('tables'),
this.af.database.object('sections')
);

var subscription = source.subscribe(
function (x) {
console.log('Next: %s', x);
},
function (err) {
console.log('Error: %s', err);
},
function () {
console.log('Completed');
});

Answer

There are a number of ways (read, operators) which will help you combine sources. A general resource can be found here, in the section Combining multiple observable sequences into a single sequence. For your specific problem, here is the short list that seems to make the cut :

  • combineLatest: emits a value when 1. BOTH sources have emitted at least one value, 2. after that, anytime one of the sources emits a value.

For example: Rx.Observable.combineLatest(object('tables'), object('sections').take(1))

  • withLatestFrom : emits a value when the first source emits a value. The emitted value includes the latest emitted value of the second source.

For example : object('tables').withLatesFrom(object('sections').take(1))

  • zip : emits first value when BOTH sources have emitted one value. emits Nth value via the same process.

For example: Rx.Observable.zip(object('tables'), object('sections').take(1))

Each of those operators have similar but slightly different semantics. I would assume combineLatest is what you need but check the doc, set up some code and try out something and if that does not work, come back and post it here.

Comments