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

user_218640 0
Viewed 414

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.

observable rxjs typescript javascript
2 Answers

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

user_2710120

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.

user_18583570
Related