Run a second function once the first function in Angular has been executed

Question

Run a second function once the first function in Angular has been executed

I have a method called createCal within the ngOnInit function. After createCal is executed, I want to run createDefault() after the loop has been executed three times. Following that, other codes should execute that come after createCal. I am receiving a warning message saying that 'await' has no effect on the type of this expression.

 ngOnInit() {
    this.createCal();
    ..
    }
    
     async createCal()
      {
        let response=await this.commonService.getAllList().toPromise();
        if(response?.length==0)
        {
          let res=await this.createDefault();
        }
      }
    
    
    
     createDefault()
      {
        let defaultList=['Test 1','Test 2','Test 3'];
        for(let i=0;i<defaultList.length;i++)
        {
          if(defaultList[i])
          {
            let Json =  {
              Id: defaultList[i],
            }
            this.commonService.create(Json).subscribe(async (x: any) => {  
         
            }) 
          }
        }
      }

angular typescript async-await promise

Answer 1

Answer №1

I'm a bit confused about your intentions...

It seems like you also need to make the createDefault function asynchronous.

ngOnInit() {
    this.createCal();
    ..
    }
    
     async createCal()
      {
        let response = await this.commonService.getAllList().toPromise();
        if(response?.length === 0)
        {
          let res = await this.createDefault();
        }
      }
    
    
    
     async createDefault()
      {
        let defaultList=['Test 1','Test 2','Test 3'];
        for(let i=0;i<defaultList.length;i++)
        {
          if(defaultList[i])
          {
            let Json =  {
              Id: defaultList[i],
            }
            // It's recommended to use "toPromise" here as well if you want to wait...
            this.commonService.create(Json).subscribe(async (x: any) => {  
         
            }) 
          }
        }
      }

Note

toPromise is deprecated. The new function is lastValueFrom. Use it like this:

...
async createCal()
      {
        let response = await lastValueFrom(this.commonService.getAllList());
        if(response?.length === 0)
        {
          let res = await this.createDefault();
        }
      }
...

Answer 2

I'm a bit confused about your intentions...

It seems like you also need to make the createDefault function asynchronous.

ngOnInit() {
    this.createCal();
    ..
    }
    
     async createCal()
      {
        let response = await this.commonService.getAllList().toPromise();
        if(response?.length === 0)
        {
          let res = await this.createDefault();
        }
      }
    
    
    
     async createDefault()
      {
        let defaultList=['Test 1','Test 2','Test 3'];
        for(let i=0;i<defaultList.length;i++)
        {
          if(defaultList[i])
          {
            let Json =  {
              Id: defaultList[i],
            }
            // It's recommended to use "toPromise" here as well if you want to wait...
            this.commonService.create(Json).subscribe(async (x: any) => {  
         
            }) 
          }
        }
      }

Note

toPromise is deprecated. The new function is lastValueFrom. Use it like this:

...
async createCal()
      {
        let response = await lastValueFrom(this.commonService.getAllList());
        if(response?.length === 0)
        {
          let res = await this.createDefault();
        }
      }
...

Answer 3

Answer №2

The error you're encountering is due to the fact that the createDefault function is not asynchronous. It's recommended to choose either Promises or Observables for a more cohesive approach.

Here's a way to achieve the desired outcome without Promises, leveraging rxjs:

ngOnInit() {
  this.commonService.getAllList().pipe(
    filter(response => response?.length === 0), 
    switchMap(() => {
      const defaultList = ['Test 1','Test 2','Test 3'];
      const jsonObjects = defaultList.map(id => ({Id: id}));

      return combineLatest(
        jsonObjects.map(json => this.commonService.create(json))
      );
    }),
  ).subscribe()
}

Answer 4

The error you're encountering is due to the fact that the createDefault function is not asynchronous. It's recommended to choose either Promises or Observables for a more cohesive approach.

Here's a way to achieve the desired outcome without Promises, leveraging rxjs:

ngOnInit() {
  this.commonService.getAllList().pipe(
    filter(response => response?.length === 0), 
    switchMap(() => {
      const defaultList = ['Test 1','Test 2','Test 3'];
      const jsonObjects = defaultList.map(id => ({Id: id}));

      return combineLatest(
        jsonObjects.map(json => this.commonService.create(json))
      );
    }),
  ).subscribe()
}

Run a second function once the first function in Angular has been executed

Answer №1

Note

Answer №2

Similar questions

404 Error: The requested API endpoint seems to have gone missing, as the URL cannot be found

Creating an HTTP gateway with Observables

Angular 2 Routing 3.0: Paying Attention to Letter Case

A viewless Angular 2 component

Exploring the functionality of surveyjs in conjunction with react and typescript

What could be causing TypeScript to display errors in unexpected locations while inferring inner types?

Having trouble selecting all checkboxes in the tree using angular2-tree when it first initializes

Angular HTTP requests are failing to function properly, although they are successful when made through Postman

subscribing to multiple observables, such as an observable being nested within another observable related to HTTP requests

Attempting to retrieve data from cloud Firestore utilizing keyvalue in Angular

Unable to install a specific commit of an angular library from GitHub using npm

What is the process of adding an m4v video to a create-next-app using typescript?

What is the reason a type is able to cast to an indexed collection when it is inferred, while an explicit type that seems identical is

Allow Nest.js server to receive binary files in the request body

Retrieving desired route in Angular 2 RC5 within canDeactivate function

Is your pure function component not receiving or responding to input props correctly?

Issues with IonPicker displaying incorrect values

Verify your identity with Azure AD B2C within a NativeScript Angular application

How can one correctly cast or convert an array of objects to the interface that extends the objects' parent interface in Typescript?

Using Typescript, invoke functions within an object by specifying a string key