CODEWITHSUNDEEP
javascripttypescriptrxjsobservable
char m
char m

Reputation: 8336

How to combine 2 or more observables so that you know which emitted?

let's say you have 2 observables:

const obs1$: Observable<string[]> = this.getObs1$();
const obs2$: Observable<string[]> = this.getObs2$();

i want to combine these 2 so that in subscription (or rxjs map) i know which emitted the values. I can't use combineLatest because for the other observable i just get the latest value it emitted at some point.

Upvotes: 6

Views: 3511

Answers (3)

Ben Racicot
Ben Racicot

Reputation: 5915

I didn't get what I needed out of merge but my go-to is combineLatestWith

this.transaction$
  .pipe(takeUntil(this._ngUnsubscribe), 
  combineLatestWith(this.selectedStatus$)) // ngxs add latest sliced data to response
  .subscribe(([status, tx]) => {
    console.log(status, tx);
  });

With NGXS its convenient to attach one of your slices via selector to also get the data in the response.

Upvotes: 0

BizzyBob
BizzyBob

Reputation: 14740

You can use merge to combine the two observables into a single observable. Then, do what @martin suggested and map each source's emissions to a little structure that allows you identify the source:

const obs1$: Observable<number[]> = getNumbers();
const obs2$: Observable<string[]> = getLetters();

const combined$ = merge(
  obs1$.pipe(map(data => ({ source: 'obs1$', data }))), 
  obs2$.pipe(map(data => ({ source: 'obs2$', data })))
);

combined$.subscribe(
   ({ source, data }) => console.log(`[${source}] data: ${data}`)
);

// OUTPUT:
//
// [obs1$] data: 1
// [obs2$] data: A
// [obs2$] data: A,B
// [obs2$] data: A,B,C
// [obs1$] data: 1,2
// [obs2$] data: A,B,C,D
...

Here's a little StackBlitz example.

Upvotes: 2

Drenai
Drenai

Reputation: 12357

There doesn't seem to be a purely RxJS solution to this (but hopefully someone can prove me wrong on that!)

You could use a variable in the outter scope to track the emitting observable as a workaround

let trigger: TriggerEnum;

const obs1$: Observable<string[]> = this.getObs1$()
  .pipe(tap(() => trigger = TriggerEnum.One));
const obs2$: Observable<string[]> = this.getObs2$()
  .pipe(tap(() => trigger = TriggerEnum.Two));;

combineLatest(....).subscribe(
 // check trigger value
);

From the docs as a just-in-case: be aware that combineLatest will not emit an initial value until each observable emits at least one value

Upvotes: 2

Related Questions