How to use Async with Angular8 firestore in ngOnInIt function?

Question

I am retrieving data from firestore in the ngOnInIt function and trying to use that data in that same lifecycle. How to use Async to solve the problem?

 ngOnInit() { this.service.getUserData().subscribe(actionArray =>{ this.userList = actionArray.map(item =>{ console.log("Items", item); console.log("Data: ", item.payload.doc.data()); return { id: item.payload.doc.id, ...item.payload.doc.data() } as customersUser; }) }); console.log("User List: ", this.userList); this.getUserData(); } getUserData(){ this.userList.map(item =>{ if(item.id == this.userId){ this.userObj = item; } }) console.log(this.userObj); }

I am receiving an empty array of userList[] since the function does not wait to receive snapshot changes.

Answer 1

Move this line

    console.log("User List : ", this.userList);

to where the userList is populated with data, that is, inside the subscriber. So, instead of

ngOnInit() {
    this.service.getUserData().subscribe(actionArray =>{
        this.userList = actionArray.map(aMappingFunction);
    });
    console.log("User List : ", this.userList);

    this.getUserData();
  }

do

ngOnInit() {
    this.service.getUserData().subscribe(actionArray =>{
        this.userList = actionArray.map(aMappingFunction);
        console.log("User List : ", this.userList);
    });

    this.getUserData();
  }

Answer 2

Use async await . It's another solution. try it.

async ngOnInit() {
    await this.service.getUserData().subscribe(actionArray =>{
      this.userList = actionArray.map(item =>{
        console.log("Items", item);
        console.log("Data : ", item.payload.doc.data());
        return {
          id : item.payload.doc.id,
          ...item.payload.doc.data()
        } as customersUser;
      })
    });
    console.log("User List : ", this.userList);

    await this.getUserData();

  }



  getUserData(){
  this.userList.map(item =>{
    if(item.id == this.userId){
      this.userObj = item;
    }
  })
  console.log(this.userObj);
}