I would just like to make a call in the api and reuse the data in an observable, like a kind of store like in redux.

API URL: Properties undefined?

I know if i do it that way the find works.

// In this observable I access directly in the api and I can access the investment portfolio Agora
// it's working, but I wouldn't want to do it that way because I would have made another call on the server
public portifolioAgora$(): Observable<Carteiras> {
    return this.api.getInvestiments()
        .pipe(
            map(response => response.carteiras.find(
                carteira => carteira.tipoInvestimento === "AGORA"
            )),
            finalize(() => this.loadingService.loadingOff())
            //tap(data => console.log(data, JSON.stringify(data)))
        )
}

CodePudding user response：

Since in getInvesmentsPortifolio$() you are adding only carteiras array into BehaviourSubject So, inside getPortifolioAgora update map code to

 getPortifolioAgora(): Observable<any> {
    return this.investment$.pipe(
      map((response) =>
        response.find((carteira) => carteira.tipoInvestimento === 'AGORA')
      )
    );
  }

Also the problem can be you are calling getPortifolioAgora before getInvesmentsPortifolio$, the result will not be available in Subject at very initial load

CodePudding user response：

@navnath Answered my question, putting it here to make it clear

investments$ was coming undefined in getPortifolioAgora() because getInvesmentsPortifolio$() not subscribe in constructor.

the constructor has to stay that way:

constructor(private api: ConsolidadoApi, private loadingService: LoadingService, public messagesService: MessagesService, public state: StateService) {
    this.getInvesmentsPortifolio$().subscribe()
 }

And

 getPortifolioAgora(): Observable<any> {
    return this.investment$.pipe(
      map((response) =>
        response.find((carteira) => carteira.tipoInvestimento === 'AGORA')
      )
    );
  }