operators-observable-in-an-observable.md

#Observable in an Observable

Quite often you come to a point where you start with one type of Observable and you want it to turn into something else.

Example

import { of } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { flatMap, map } from 'rxjs/operators';

let stream$ = of(1,2,3)
.pipe(
  flatMap((val) => {
    return of(val).pipe(
        ajax({ url : url + })).pipe(
          map((e) => e.response)
        )
    ); 
}

stream.subscribe((val) => console.log(val))

// { id : 1, name : 'Darth Vader' }, 
// { id : 2, name : 'Emperor Palpatine' },
// { id : 3, name : 'Luke Skywalker' }

So here we have a case of starting with values 1,2,3 and wanting those to lead up to an ajax call each

--1------2-----3------> --json-- json--json -->

The reason for us NOT doing it like this with a .map() operator

import { of } from 'rxjs';
import { ajax } from 'rxjs/ajax';
import { map } from 'rxjs/operators';

let stream$ = of(1,2,3).pipe(
  map((val) => {
    return of(val)
      .pipe(
        ajax({ url : url + }) )
        .pipe(
          map((e) => e.response ) 
        )
      )
  }
);

is that it would not give the result we want instead the result would be:

// Observable, Observable, Observable

because we have created a list of observables, so three different streams. The flatMap() operator however is able to flatten these three streams into one stream called a metastream. There is however another interesting operator that we should be using when dealing with ajax generally and it's called switchMap(). Read more about it here Cascading calls