Angular: Enable function to await Observable completion before returning result

I require assistance with the user function below:

  getUser(uuid: string): Observable<WowUserDataModel> {
    let user: WowUserDataModel = {
      login: null,
      userUuid: uuid,
      firstName: null,
      lastName: null,
      displayName: null,
      email: null,
      authorities: null
    };

    return this.http.get(WowUrlProvider.gateway.wowUserAuthorities.replace('{userUuid}', uuid.toUpperCase())).pipe(
      map((authorities) =>
        user.authorities = authorities,
      )
    );
  }

My Requirement: I need to wait for the completion of the this.http.api call, which returns an Observable. Once the call is complete, I want to assign the result to user.authorities before returning an Observable containing the entire user object (always a single user).

Current Issue: The function only returns the authorities property and not the entire user object.

Is there a way to achieve this without changing the return type of the function?

Answer №1

fetchUserDetails(userId: string): Observable<UserInfoModel> {
  // ...
    return this.httpClient.get(UserUrlService.userEndpoints.getUserInfo.replace('{userId}', userId.toUpperCase())).pipe(
      map((userInfo) => {
       user.details = userInfo;
       return user;
      })
    );
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for choosing nested colors from a theme in Material UI?

I have a question regarding how to select a nested style from my theme when creating a Button. Below is the snippet of code that illustrates my dilemma: const buttonStyle: SxProps<Theme> = { '&:hover': { backgroundColor: 'bac ...

Creating a TypeScript function that can dynamically assign values to a range of cells within a column, such as AD1, AD2, AD3, and so on

Hello there I'm currently working on a function that will dynamically assign values to the column range of AE to "AD" + i. However, when I use the function provided below, it only writes AD5 into the first 5 columns instead of AD1, AD2, AD3, and so o ...

Is there a possibility that typescript decorators' features will be polyfilled in browsers lacking ES5 support?

According to the typescript documentation, a warning is issued: WARNING  If your script target is lower than ES5, the Property Descriptor will be undefined. If the method decorator returns a value, it will act as the Property Descriptor for the method. ...

What is the best approach to access the reportProgress of several observables combined within a forkJoin?

I'm currently working on an Angular project where I need to upload multiple files through a form. Each file could be quite large, so I can't just do one POST request with all the files due to server size limits. It would be great if I could impl ...

When utilizing ng-content alongside *ngtemplateOutlet, the content does not appear visible within the DOM

I'm working with three Angular components - a base component and two child components (child1 and child2). The structures are as follows: child1.component.html <ng-template #child1Template> <div> <h1>CHILD 1</h1> ...

Troubleshooting Issue with Chrome/chromium/Selenium Integration

Encountered an issue while attempting to build and start the application using "yarn start": ERROR:process_singleton_win.cc(465) Lock file cannot be created! Error code: 3 Discovered this error while working on a cloned electron project on a Windows x64 m ...

Tips for resolving relative child routes in Angular

Routing Configuration const routes: Routes = [ { path: '', loadChildren: './home/home.module#HomeModule' }, { path: 'admin', loadChildren: './admin/admin.module#AdminModule' } ]; Nested Home Routing const ro ...

The most efficient method for receiving real-time updates from the server to the app is through Angular 7

Currently, I am in the process of developing an Angular 7 messages service (user to user) for my website. The approach I have taken involves receiving updates from the server (Yii2 REST API) every 3 minutes using an interval function (see code snippet belo ...

Combining pixijs with TypeScript in Ionic 2 using npm

To begin, I ran the command npm install -g ionic Followed by ionic start pixiApp blank --v2 Navigated to the pixiApp directory with cd pixiApp Installed necessary dependencies using npm install Added a specific version of pixi.js (4.1.0) with npm install p ...

Importing an SDK in Angular is causing a frustrating issue where a blank white screen is

Currently, I'm facing an issue with integrating @eth-optimism/sdk into my Angular project. Despite importing the sdk using import * as optimismSDK from "@eth-optimism/sdk" and attempting to utilize its functions like CrossChainMessenger, Angular displ ...

The error occurs when trying to access the `pipe` property of an undefined variable in NgbTypeahead

I am currently working on implementing the typeahead directive of ng-bootstrap. Below is the code snippet from my HTML file: <input type="text" class="form-control" formControlName="payee" autofocus [ngbTypeahead]="searchPayee"> Here's the cor ...

Chrome Devtool reported an error, but the majority of them are in a null file

Currently grappling with an irksome problem in Vue.js. No matter how hard I try, I just can't seem to pinpoint the error. Even when setting a debugger, all it shows is an empty file. Please take a look at the image provided. Any assistance on identify ...

How can one effectively monitor the advancement of a file transfer operation?

Looking at integrating a Spring Boot REST API with an Angular Frontend, I am interested in monitoring file upload/download progress. I recently came across an informative article that dives into the implementation details of this feature. The approach see ...

Messing with onBeforeUnload causes issues with the browsing history in Angular

After the user finishes entering data on a page, my goal is for them to return to the previous page (e.g. Main Page -> Input Page). If I redirect them when they click submit, it creates a circular history loop (Main Page -> Input Page -> Main Page). Theref ...

lint-staged executes various commands based on the specific folder

Within my project folder, I have organized the structure with two subfolders: frontend and backend to contain their respective codebases. Here is how the root folder is set up: - backend - package.json - other backend code files - frontend - p ...

How can I provide type annotations for search parameters in Next.js 13?

Within my Next.js 13 project, I've implemented a login form structure as outlined below: "use client"; import * as React from "react"; import { zodResolver } from "@hookform/resolvers/zod"; import { signIn } from "n ...

Having trouble getting ng-click to function properly in TypeScript

I've been struggling to execute a function within a click function on my HTML page. I have added all the TypeScript definition files from NuGet, but something seems to be going wrong as my Click Function is not functioning properly. Strangely, there a ...

Exploring Angular 2: Best Practices for Debugging Objects and Looping Through Them

After successfully fetching the API data from , it appears that everything is set up correctly. The next step is to display the menu children from the API object.items. However, when I try to use {{ menus }}, all I get is [object object]. It seems that us ...

Mastering Firebase pagination with RxJS - the ultimate solution

I came across this helpful post on Cloud Firestore pagination with RXJS at Cloud Firestore - How to paginate data with RXJS While it is exactly what I need, I am struggling to understand how to implement the following code snippet: import { UsersService } ...

Creating a composite object in Angular 2 reactive forms: a step-by-step guide

These are the two classes I have: export class Machine { name = ''; computer = new Computer() } export class Computer { os = ''; } Then in my component, using reactive forms, I have: ngOnInit() { this.form = this.fb ...