How to map an Observable with values from another observable

Question

I obtain my Ofertas here

getOfertasByYear(year:number): Observable<Oferta[]> {
return this.http.get<Oferta[]>(`${this.urlWebAPI}/ofertas/year/${year}`)
  .pipe(
    map(ofertas=>
      ofertas.map(oferta=>({
        ...oferta,
        añoPresentada:new Date(oferta.fechaPresentacionFulcrum).getFullYear(),
        organismoId:¿¿¿???
      }) as Oferta)
      ),
    tap(data => console.log('OfertasService-getOfertasByYear(): ', data)
    ),
    catchError(this.handleError)
  )
}

But I need to calculate his organismoId and that is here

getOrganismoDeOferta(ofertaId:string): Observable<Organismo> {
return this.http.get<Organismo>(`${this.urlWebAPI}/organismos/oferta/${ofertaId}`)
  .pipe(
    tap(//data=>console.log('OfertasService-getOrganismos(): ', data)
    ),
    catchError(this.handleError)
  )
}

And I don't know how to pass the result of this Observable to te mapped property

getOfertasByYear(year:number): Observable<Oferta[]> {
return this.http.get<Oferta[]>(`${this.urlWebAPI}/ofertas/year/${year}`)
  .pipe(
    map(ofertas=>
      ofertas.map(oferta=>({
        ...oferta,
        añoPresentada:new Date(oferta.fechaPresentacionFulcrum).getFullYear(),
        organismoId:this.getOrganismoDeOferta(oferta.id).subscribe(data=>{
          ¿¿¿¿??????
        })
      }) as Oferta)
      ),
    tap(data => console.log('OfertasService-getOfertasByYear(): ', data)
    ),
    catchError(this.handleError)
  )
 }

I subscribe to it but I don't know how to make the assignment

I have tried to obtain all Ofertas and All Concursos but neither

ofertas$ = this.dataService.getOfertas();
concursos$ = this.dataService.getConcursos();

ofertasConOrganismos$ = forkJoin([
 this.ofertas$,
 this.concursos$
])
.pipe(
  map(([ofertas, concursos]) =>
    ofertas.map(oferta => ({
      ...oferta,
      organismoId: concursos.find(c => c.id ==                oferta.concursoId).organismoId
    }) as Oferta))
);

But I get this error:

Cannot read properties of undefined (reading 'organismoId')

Any idea, please?

Thanks

BizzyBob · Accepted Answer · 2021-11-17 13:10:28Z

0

Instead of using a plain map and then calling .subscribe(), you can use a "Higher-Order Mapping Operator" to handle the inner subscription for you. In this case, let's use switchMap.

The idea is to return an observable inside switchMap that emits the data you need. Since you need to make multiple calls, we can leverage some help from forkJoin.

With forkJoin you pass in an array of observables, and it will emit an array of the results. So here below we map the array of Oferta to an array of observables that will each emit the Oferta with the organismoId appended:

getOfertasByYear(year: number): Observable<Oferta[]> {
    return this.http.get<Oferta[]>(`${this.urlWebAPI}/ofertas/year/${year}`).pipe(
        switchMap(ofertas => forkJoin(
            ofertas.map(oferta => this.appendOrganismo(oferta))
        )),
        catchError(this.handleError)
    )
}

Nothing too fancy for the definition of appendOrganismo(); we just make the http call, then map the result to the desired shape:

private appendOrganismo(oferta: Oferta) {
    return this.getOrganismoDeOferta(oferta.id).pipe(
        map(organismo => ({
            ...oferta,
            añoPresentada: new Date(oferta.fechaPresentacionFulcrum).getFullYear(),
            organismoId: organismo.id
        }))
    );
}

answered Nov 17, 2021 at 13:10

BizzyBob

14.9k4 gold badges31 silver badges62 bronze badges

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

1 Comment

kintela Over a year ago

@BizzBob thanks for your great explanation but Now I have an error in appendOrganismo() in the line organismoId:organismo.id TypeError: Cannot read properties of null (reading 'id'). I don't understand it you call to getOrganismoDeOferta but never subscribe to te data returned?

Collectives™ on Stack Overflow

How to map an Observable with values from another observable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related