Home > front end >  Replacing values in Observable using another Observable
Replacing values in Observable using another Observable

Time:08-13

I have a method to get a string from a API :

getCurrentVersion(): Observable<string> {
    return this.httpClient.get<string>(`${environment.adminPublicURL}/CURRENT_VERSION`)
  }

Then I use it to replace a value inside my map:

getRoutesAdmin(): Observable<RouteMF[]> {
    const currentVersion = this.getCurrentVersion
    const url = `${environment.adminPublicURL}/${currentVersion}/assets/routes-partial.json`
    return this.httpClient.get<RoutesResponse>(`${url}`).pipe(
      map(({ routes }) => {
        return routes.map((m) => {
          m.remoteEntry.replace("@SED_VERSION", currentVersion)
          return m
        })
      }),
      map((routes) =>
        routes.map((route) => {
          const protectedRoute: RouteMF = {
            ...route,
            ...this.routesService.addGuards(route),
          };

          return protectedRoute;
        })
      )
    );
  }

But it does not work. Vscode shows me compile time error:

No overload matches this call.
  The last overload gave the following error.
    Argument of type '() => Observable<string>' is not assignable to parameter of type '(substring: string, ...args: any[]) => string'.
      Type 'Observable<string>' is not assignable to type 'string'.ts(2769)

CodePudding user response:

Your using an observable as a variable. If you see getCurrentVersion is a function that returns an observable and needs to be subscribed to get the output from it!

getRoutesAdmin(): Observable<RouteMF[]> {
    const currentVersion = this.getCurrentVersion // problematic line
    const url = `${environment.adminPublicURL}/${currentVersion}/assets/routes-partial.json` // problematic line
    return this.httpClient.get<RoutesResponse>(`${url}`).pipe(

You need to first make the currentVersion api call, then use that output and call the second one, using switchMap.

getCurrentVersion(): Observable<string> {
    return this.httpClient.get<string>(`${environment.adminPublicURL}/CURRENT_VERSION`);
}

getRoutesAdmin(): Observable<RouteMF[]> {
    return this.getCurrentVersion().pipe(
        switchMap(currentVersion => {
            const url = `${environment.adminPublicURL}/${currentVersion}/assets/routes-partial.json`;
            return this.httpClient.get<RoutesResponse>(`${url}`).pipe(
                map(({ routes }) => {
                    return routes.map(m => {
                        m.remoteEntry.replace('@SED_VERSION', currentVersion);
                        return m;
                    });
                }),
                map(routes =>
                    routes.map(route => {
                        const protectedRoute: RouteMF = {
                            ...route,
                            ...this.routesService.addGuards(route),
                        };

                        return protectedRoute;
                    })
                )
            );
        })
    );
}
  • Related