Retrieving the Angular API response from a service and passing it to a component

Question

Retrieving the Angular API response from a service and passing it to a component

One challenge I encountered in my Angular 12 application is capturing the response of an API call made in the service file within my component. The issue arises from the asynchronous nature of the API response, which causes the console to always display 'undefined'. Despite attempting to use async await, I have yet to find a solution:

WITHIN THE SERVICE FILE:

public checkEmail(emailToVerify: any) {
    this.myService.emailValidate({ email: emailToVerify }).subscribe({
      next: (data: { result: any) => {
        console.log('updateEmail-res', data);
        return data;
      },
      error: (err: any) => {
        console.log('updateEmail-err', err);
      }
    });
  }

WITHIN THE COMPONENT:

this.apiResponse = await this.myService.checkEmail(customerEmail);
 console.log("this.apiResponse", this.apiResponse)

javascript angular typescript

Answer 1

Answer №1

Within Component

verifyEmailAddress = async () => {
    const parameters = {
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="730716000733141e121a1f5d101c">[email protected]</a>',
    };
    const responseFromAPI: boolean = await this.emailService.verifyEmail(parameters);
    console.log(`Response from API is ===`, responseFromAPI);
  };

Inside Service

export class EmailService {
  constructor() {}

  verifyEmail = async (params: {
    emailAddress: string;
  }): Promise<boolean> => {
    return new Promise((resolve) => {
      const isValid = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(
        params.emailAddress
      );

      resolve(isValid);
    });
  };
}

Answer 2

Within Component

verifyEmailAddress = async () => {
    const parameters = {
      email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="730716000733141e121a1f5d101c">[email protected]</a>',
    };
    const responseFromAPI: boolean = await this.emailService.verifyEmail(parameters);
    console.log(`Response from API is ===`, responseFromAPI);
  };

Inside Service

export class EmailService {
  constructor() {}

  verifyEmail = async (params: {
    emailAddress: string;
  }): Promise<boolean> => {
    return new Promise((resolve) => {
      const isValid = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(
        params.emailAddress
      );

      resolve(isValid);
    });
  };
}

Answer 3

Answer №2

The checkemail method serves no purpose. If you already have emailValidate, there's no need for another redundant method. Just use emailValidate directly.

this.apiResponse = await this.myService.emailValidate({ email: customerEmail});
 console.log("this.apiResponse", this.apiResponse)

Furthermore, in your component:

this.myService.emailValidate({ email: customerEmail}).subscribe({
          next: (data: { result: any) => {
            console.log('updateEmail-res', data);
             this.apiResponse = data;
          },
          error: (err: any) => {
            console.log('updateEmail-err', err);
          }
        });

Answer 4

The checkemail method serves no purpose. If you already have emailValidate, there's no need for another redundant method. Just use emailValidate directly.

this.apiResponse = await this.myService.emailValidate({ email: customerEmail});
 console.log("this.apiResponse", this.apiResponse)

Furthermore, in your component:

this.myService.emailValidate({ email: customerEmail}).subscribe({
          next: (data: { result: any) => {
            console.log('updateEmail-res', data);
             this.apiResponse = data;
          },
          error: (err: any) => {
            console.log('updateEmail-err', err);
          }
        });

Retrieving the Angular API response from a service and passing it to a component

Answer №1

Answer №2

Similar questions

What sets apart TypeScript's indexed types from function signatures?

"I encountered an error stating that res.json is not a function while trying to establish a connection between ReactJS

What is the best way to vertically center an item at the end of a card in Bootstrap 4?

Obtain the hexadecimal color code corresponding to the level of humidity

Is there a way to utilize nodemon without having to install it through npm?

How can you selectively send only the values of chosen checkboxes when dealing with hidden inputs that share the same name?

Keep track of the input values by storing them in an array after they are

Continuously converting methods recursively until the array is fully processed

The 'push' property is not found within the 'Control' type

Attempting to push my code changes to update my Angular website, however, encountering an error message in the console

Having an issue in Reactive Form where the nested formControlName is not capturing the value

Move the object in Three.js by rotating it around the origin (0,0,0) in response to mouse

What are the steps for transforming this code into pure CSS, or incorporating it into a Javascript function?

I attempted to copy the "koa" module from my node_modules folder to a custom typeRoots directory, but it doesn

Unexpected behavior with Ember.js Ajax request

What is the process for transferring the value from a list item to the search field box?

Creating a React lightbox feature where users can click on the first image and view it, but the subsequent images are displayed as empty

The element type 'x' in JSX does not offer any construct or call signatures

Develop a component library for Angular 2 without incorporating inline styles

The class function in the exported typescript logs that "this" is not defined