Angular make an api call async and use the result

Question

I'm trying to make an API call

ngOnInit(){
  this.function1()
}

function1(){
  this.userService.getUser()
  .then((data) => {
   this.user = data.user
   this.userM = data.userM
// here problem: If I make a console.log(this.userM) it result at the beginning empty
   if(this.userM.length > 0 ) {
       console.log("goInside")}
   else {
    console.log("doesn't enter")
     //it enters always there
   }
  }
}

in my service:

async getUser(): Promise<any>{
  let user: any = []
  let userM: any = []
  //.... operation to populate
  return {user, userM}
}

When I make an api call I would to use the this.userM array to make some operations. But it results always empty at the beginning, but it doens't enter anymore in if. How can I do?

Andres2142 · Accepted Answer · 2022-04-08 16:58:16Z

1

Make use of rxjs, try using an Observable instead:

import { of } from 'rxjs';

getUsers(): Observable<any> {
  let user: any = []
  let userM: any = []
  //.... operation to populate

  return of({user, userM});
}

And then, within your component:

ngOnInit(){
  this.function1()
}

function1(){
  this.userService.getUser().subscribe((response) => {
    const { user, userM } = response;

    if (userM.length) console.log('There is data in it!')
    else console.log('No data found...');
  });
}

I suggest not using Promises in an Angular project unless necessary, you have at your disposal rxjs along with tons of useful operators for handling async calls/streams of data

edited Apr 8, 2022 at 16:58

answered Apr 8, 2022 at 16:44

Andres2142

3,0122 gold badges18 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jack23 Over a year ago

Thanks for your advice! I'm testing as you suggest, but in this way how can I check if the this.user or this.userM in if statement?

Collectives™ on Stack Overflow

Angular make an api call async and use the result

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related