Tengo estos 2 observables:

this.areasService.getSelectAreas({})
   .subscribe((result) => this.areasSelect = result.json().data.areas);
this.stationsService.getSelectStations({})
   .subscribe((result) => this.stationsSelect = result.json().data.stations);

Que llena estas 2 variables (asíncronas) this.areasSelect & this.stationsSelect.

También tengo un tercer observable que necesito tener estos valores para continuar:

this.transportsService.getTransport().subscribe((res) => {
     console.log(this.areasSelect)
     console.log(this.stationsSelect)
})

¿Cómo puedo combinar estos 3 observables?

5
Michalis 18 jun. 2017 a las 16:04

2 respuestas

La mejor respuesta

Puedes usar forkJoin:

import { forkJoin } from 'rxjs/observable/forkJoin';

let areaSelect$ = this.areasService.getSelectAreas({})
.map(res => res.json().data.areas)
.do(val => this.areaSelect = val);

let stationSelect$ = this.stationsService.getSelectStations({})
.map(res => res.json().data.stations)
.do(val => this.stationSelect = val);

forkJoin(areaSelect$,stationSelect$)
.mergeMap(data=>{
   //data is an array with 2 positions which contain the results of the 2 requests. data[0] is the vale of this.areaSelect for example
   return this.transportsService.getTransport(data[0],data[1]);
}).subscrite(res => {
  // res is the response value of getTransport
})
3
Jota.Toledo 18 jun. 2017 a las 14:25

Todo lo que necesita hacer es usar forkJoin, llamará a sus dos primeras llamadas asíncronas y solo devolverá datos al finalizar ambas, por lo que no debe preocuparse

Después de eso en la suscripción, obtendrá el resultado en una matriz de secuencia que llamó las URL o API.

const combined = Observable.forkJoin(
    this.areasService.getSelectAreas({}).map((res) => res.json().data.areas),
    this.stationsService.getSelectStations({}).map((res) => res.json().data.stations)
)

combined.subscribe(latestValues => {

    this.areasSelect = latestValues[0];
    this.stationsSelect = latestValues[1];

    this.transportsService.getTransport().subscribe((res) => {
        console.log(this.areasSelect)
        console.log(this.stationsSelect)
    })
});
4
Vivek Doshi 18 jun. 2017 a las 13:56