core.js:6150 ERROR TypeError: this.object is not iterable in Angular

Question

I want to show First Name of user in HTML file

  getFirstName(id: any){
    this.users = this.afs.collection('users', ref => ref.where("uid", "==", id)).valueChanges();

    this.users.subscribe(users => {
      this.users = users;
    })
    let fname;
    for(let user of this.users){
        fname = user.firstName;
    }
    return fname;
  }

But compiler make error when First Name shows in HTML

core.js:6150 ERROR TypeError: this.users is not iterable

Answer 1

Don't use the same variable this.users as subscription object and data. Also you need to use for-of inside the subscription.

fname  = null;

  getFirstName(id: any){
    this.users = this.afs.collection('users', ref => ref.where("uid", "==", id)).valueChanges();

    this.users.subscribe(users => {
      for(let user of users){
        this.fname = user.firstName;
      }
    })
  }