Angular 2 http - combine multiple Observables

Question

I'm totaly new in async Observable world. I hope somebody help me.

I have two Observable<boolean> and I want to combine them.

I tried to use:

var obs1 = Observable.of(true).delay(1000);
var obs2 = Observable.of(false).delay(100);    
obs1.combineLatest(obs2, (obs1Val, obs2Val) => {
    //bool result
    });

and thats almost it... almost because I want to start obs2 when obs1 is finished, with combineLatest both starts in the same time.

obs1 and obs2 here are simple examples in my case thats angular http requests:

obs1 : Observable<boolean> = http.get(...).map(d => <boolean>d);

Thanks in advance for help

Why not subscribe to the 1st obs1 and make the other call form the callback? — Avi
– Avi, Commented Sep 10, 2016 at 19:54

kit · Accepted Answer · 2016-09-11 06:40:27Z

1

If you want to start obs2 when you get response from obs1, it has to be called in onNext of obs1.subscribe.

getBothResult() {
  return Rx.Observable.create(function (observer) {
    obs1 : Observable<boolean> = http.get(...).map(d => <boolean>d);
    obs1.subscribe((obs1Value) {
      Observable.of(false).delay(100).subscribe(obs2Value => {
        //compute value from obs1Value and obs2Value as they are visible in closure assign it to eg. finalValue
        var finalValue = obs1Value + obs2Value;
        observer.onNext(finalValue);
      });  
    });
  });
}

It's very possible that an operator exists that does all those things in some nifty way, however I'm not aware of it.

edited Sep 11, 2016 at 6:40

answered Sep 10, 2016 at 19:55

kit

4,9203 gold badges26 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kuba Over a year ago

Sth like that but I want to wrap your code in another function which return Observable<boolean> calculated from obs1 and obs2 values. I tried like there but it doesn't work: jsfiddle

Kuba Over a year ago

obs2 triggers after obs1 completes. getBothResult() wait for both. Finally getBothResult() return Observable<boolean> calculated from obs1Val and obs2Val. Thats what I need.

Kuba Over a year ago

that's it! In my case I had to call observer.complete() after each next() also. Thanks a lot!

igorzg · Accepted Answer · 2016-09-10 21:51:23Z

1

You can use observable zip

 let obs1 = Observable.of(true).delay(1000);
 let obs2 = Observable.of(false).delay(100);    

 let source = Observable.zip(
      obs1,
      obs2,
      (ob1, ob2) => {
        return {
          value1: ob1,
          value2: ob2
        };
      }
  );
  source.subscribe(data => console.log(data))

edited Sep 10, 2016 at 21:51

answered Sep 10, 2016 at 21:43

igorzg

1,50614 silver badges17 bronze badges

3 Comments

Kuba Over a year ago

According to RxJS documentation I'm afraid that obs2 won't wait for obs1 complete before start :/

Kuba Over a year ago

Tested. As I expected both observables started in the same time :/

igorzg Over a year ago

Hey thy dont start at same time thy will be only resolved at same time

Skippy · Accepted Answer · 2016-09-10 23:31:21Z

0

As you want to have obs2 execute after obs1, we can wait for a response In the Rx world, you should avoid subscribing to an observable, and then subscribing to another observable in the callback.

Here is an approach that should get you the result you are looking for.

var obs1 = Observable.of(true).delay(1000);
var obs2 = Observable.of(false).delay(100);
var obsOf1And2 = obs1.flatMap(obs1Response => 
    obs1Response.flatMap(obs2Response => { 
        // do what you want with both responses 
    }));

obsOf1And2.subscribe(console.log);

answered Sep 10, 2016 at 23:31

Skippy

3464 silver badges16 bronze badges

Collectives™ on Stack Overflow

Angular 2 http - combine multiple Observables

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related