Get data once from 2 observables

Question

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');
  });

Have you done any research on this? How about https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/forkjoin.md — jonrsharpe, Nov 01 '16 at 18:30
When I'm using forkJoin on this, nothing is executed, I have no clue why.. — TheUnreal, Nov 01 '16 at 18:43
`forkJoin` is what you want, please provide the code. Did you subscribe? — Alexander Ciesielski, Nov 01 '16 at 18:46
@AlexanderCiesielski Take a look at my update, I tried to use forkJoin like that, and no console logs like nothing happens. — TheUnreal, Nov 01 '16 at 19:04
You have to add `.take(1)` after the inner Observables, since forkJoin fires only after all inner Observables have completed. — Alexander Ciesielski, Nov 02 '16 at 07:47

user3743222 · Accepted Answer · 2016-11-02T03:39:33.447

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.

score 0 · Answer 2 · answered Nov 01 '16 at 20:07

You should use withLatestFrom operator.

see here more on withLatestFrom

/* Have staggering intervals */
var source1 = Rx.Observable.interval(140)
    .map(function (i) { return 'First: ' + i; });

var source2 = Rx.Observable.interval(50)
    .map(function (i) { return 'Second: ' + i; });

// When source1 emits a value, combine it with the latest emission from source2.
var source = source1.withLatestFrom(
    source2,
    function (s1, s2) { return s1 + ', ' + s2; }
).take(4);

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

// => Next: First: 0, Second: 1
// => Next: First: 1, Second: 4
// => Next: First: 2, Second: 7
// => Next: First: 3, Second: 10
// => Completed

score 0 · Answer 3 · answered Nov 01 '16 at 22:59

The documentation for forJoin explains it:

Runs all observable sequences in parallel and collect their last elements.

The last element I assume would be the last element fired before an observable completes, so all Observables that you pass to forkJoin has to be completed before anything is emitted.

Since you only want the first emitted element try to make each Observable complete after its first emit:

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

score 0 · Answer 4 · answered Nov 02 '16 at 09:51

try this:

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

var subscription = source.subscribe(
 data => {
       console.log(data[0]);
       console.log(data[1]);
      },
      err => console.error(err)
);

Get data once from 2 observables

4 Answers4