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?

angulartypescriptobservable

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

Learn how to set up browser targeting using differential loading in Angular 10, specifically for es2016 or newer versions

Seeking advice on JS target output for compiled Angular when utilizing differential loading. By default, Angular compiles TypeScript down to ES5 and ES2015, with browsers using either depending on their capabilities. In order to stay current, I've b ...

angulartypescript

Encountering an issue with testing CKEditor in Jest

Testing my project configured with vite (Typescript) and using jest showed an error related to ckeditor. The error is displayed as follows: [![enter image description here][1]][1] The contents of package.json: { "name": "test-project" ...

typescriptjestjsvitereact-testing-libraryckeditor5

What are the best practices for utilizing *ngIf?

In my Angular project, I am facing a challenge with using *ngIf. My app.component.html file handles both the login page and the dashboard. I want to hide the dashboard until the user logs in. To achieve this, I decided to use *ngIf. Here is how I implement ...

javascripthtmlangulartypescript

Error: Property 'content' is not defined and cannot be read

I encountered an issue with a config file while attempting to build with AOT using the command ionic cordova build android --prod Error: ./src/config/.env.ts Module build failed: TypeError: Cannot read property 'content' of undefined at Object ...

angulartypescriptionic2ionic3

Removing an attachment from the attachment object array nestled within a comment object array nested inside another object array

I am currently grappling with the challenge of removing an attachment from an array of attachments within a nested structure of comment objects. Despite several attempts, I have yet to find a solution that works effectively. export class CommentSection{ ...

angulartypescriptobject

Can the router accommodate multiple loadChildrens at once?

I recently upgraded to the latest version of angular 2 and discovered an interesting lazy load feature utilizing loadChildren. Let me illustrate with a simple example export const routes: Routes = [ { path: 'crisis', loadChildren: 'app/c ...

angular

Jest test encounters an error due to an unexpected token, looking for a semicolon

I've been working on a Node project that utilizes Typescript and Jest. Here's the current project structure I have: https://i.stack.imgur.com/TFgdQ.png Along with this tsconfig.json file "compilerOptions": { "target": "ES2017", "modu ...

javascriptnode.jstypescriptjestjs

Assistance required for setting a value in a mat-select using Angular

Could really use some assistance resolving the issue with mat-select I'm aiming to establish the initial values by utilizing the following code snippet: orders: Order[] = [{"dish":"steak-0"},{"dish":"tacos-2" ...

angular

RxJS: Understanding the issue of 'this' being undefined when used within the subscribe method

As I work on setting up a simple error notifications component and debug in Visual Studio, an issue arises within the subscribe function where 'this' is undefined. public notifications: NotificationMessage[]; constructor(notificationService: N ...

visual-studioangulartypescriptrxjs

A promise was caught with the following error: "Error in ./Search class Search - inline template:4:0 caused by: Maximum call stack size exceeded"

As a newcomer to Angular2, I am currently developing a web application that requires three separate calls to a REST API. To test these calls, I decided to simulate the API responses by creating three JSON files with the necessary data. However, my implemen ...

javascriptjsonangulartypescript

Exploring Angular2's ability to interpret directive templates using the ng-container

Recently delving into angular2, I ventured into creating dynamic forms and generating fields by following the guide provided in this URL. The result was as expected. The dynamic form component renders each field one by one using ng-container, like shown b ...

javascripthtmlangulartypescriptangular2-template

Struggling to capture the error thrown by the subscribe method in Angular using RxJs

In following the most recent tutorial, I learned about using pipe, tap, and catchError to intercept the result. This is what I currently have: getStatus(): Observable<boolean> { return this.http.get<boolean>('/status').pipe( ...

angularrxjs

I am encountering an issue with importing modules from the public folder in Next.js when using TypeScript, as I am

I've been running into an issue with importing files in Next.js using TypeScript. I'm trying to use regular imports with custom absolute paths, but I keep getting a module not found error. Oddly enough, my IDE is able to locate the file when I cl ...

javascriptreactjstypescriptecmascript-6next.js

As time passes, the Azure Service Bus Consumer experiences a decline in performance

My issue involves managing different topics with subscriptions, each tied to a consumer. Over time, I've noticed a decline in the number of messages received. Despite trying to utilize maxconcurrentcalls, it seems to only be effective at the start. My ...

javascripttypescriptnpmazureservicebusazure-servicebus-topics

Encountered an issue while integrating CKEditor 5 into a standalone Angular 17 application: "Error: window is

Having trouble integrating CKEditor with my Angular app (version 17.1.2 and standalone). I followed the guide step by step here. Error: [vite] Internal server error: window is not defined at r (d:/Study/Nam3_HK3/DoAn/bookmanagement/fiction-managemen ...

angularangularjsckeditorckeditor5

Tips on applying borders to dynamically generated content in jspdf autotable, similar to a template

Having trouble adding borders to my PDF generated using jsPDF autotable. I want the layout to match the template, can someone assist me in resolving this issue? I need the header border to consist of two lines, similar to the template image provided below ...

angularjspdf-autotable

Tips for utilizing the window object in Angular 7

To implement the scrollTo() function of the window object directly, we can use window.scrollTo(0,0). However, when researching how to do this in Angular, I found that many people create a provider as shown below: import {InjectionToken, FactoryProvider} f ...

javascriptangular

Issues with Angular2 Router functionality not functioning as expected

I have been facing an issue while trying to set up a basic Angular2 application with login functionality using Typescript. Despite defining the Router, I encounter an error when trying to access the specified URL in a browser. The error message reads: Can ...

node.jstypescriptangular

How can you update ngModel in Angular and mark the form as dirty or invalid programmatically?

My form is connected to a model as shown below In the component file: myTextModel: string; updateMyTextModel(): void { this.myTextModel = "updated model value"; //todo- set form dirty (or invalid or touched) here } Html template: <form #test ...

angulartypescriptangular4-forms

"In the realm of RxJS, there are two potent events that hold the power to

In my current situation, I encountered the following scenario: I have a service that makes Http calls to an API and requires access to user data to set the authentication header. Below is the function that returns the observable used in the template: get ...

angulartypescriptrxjs