CODEWITHSUNDEEP
javascriptangularfirebasegoogle-cloud-firestore
Mana
Mana

Reputation: 73

Problem with getting data from firestore and display it on the screen

I'm trying to write a website with angular and firebase.
The site works so that different users can be created (I added auth.service.ts) And any registered user will be able to add a contact to the firestore.

The problem: I'm unable to get the added contact information to appear on the screen.

The error I keep getting in the console is:

core.js:6241 ERROR FirebaseError: Function CollectionReference.doc() cannot be called with an empty path.

my firestore design:
collection name "users"-> containing document for each user->each user has "contacts" collection-> each contact containing the email,name,phone contacts attributes.

The following code is from the crud.service.ts file:

export class CrudService {
  constructor(private authservice: AuthService, public fireservices:AngularFirestore) { }
  
  //create_NewContact adds to the 'contacts' collection in firebase, the contact that the user entered as input
  create_NewContact(Record)
  {  
    return this.fireservices.collection('users').doc(this.authservice.currentUserId).collection('contacts').add(Record);
  }

  //get_AllContacts gets the 'contacts' collection from firebase
  get_AllContacts()
  {
    return this.fireservices.collection('users').doc(this.authservice.currentUserId).collection('contacts').snapshotChanges();
  }
.
.
.
}

The following code is from the contact-list.component.ts file:

export class ContactListComponent implements OnInit {
  contact: any;
  contactName: string;
  contactEmail: string;
  contactPhone: string;
  message:string;
  
  constructor(private authservice: AuthService,public crudservice:CrudService) { }
  
  ngOnInit() {
    this.crudservice.get_AllContacts().subscribe(data => {
      this.contact = data.map(c => {
        return {
          id: c.payload.doc.id,
          isEdit: false,
          name: c.payload.doc.data()['name'],
          email: c.payload.doc.data()['email'],
          phone: c.payload.doc.data()['phone'],
        };
      })
      console.log(this.contact);
    });
  }
  
  /*CreateRecord() will fire after the user press the "Create Contact" btn*/
  CreateRecord()
  {
    //The function stores within the relevant fields in "Record" variable, the user's input
    let Record = {};
    Record['name'] = this.contactName;
    Record['email'] = this.contactEmail;
    Record['phone'] = this.contactPhone;
    
    //create_NewContact is defined in crud.service.ts file
    this.crudservice.create_NewContact(Record).then(res => {
      this.contactName = "";
      this.contactEmail = "";
      this.contactPhone = "";
      console.log(res);
      this.message = "Contact data save done";
    }).catch(error => {
      console.log(error);
    })
  }
.
.
.
}

Do you have ideas how to fix this problem? Thank you!

Upvotes: 0

Views: 446

Answers (1)

Renaud Tarnec
Renaud Tarnec

Reputation: 83181

The error message indicates that the value passed to the doc() method is an empty string.

The problem most probably comes from the fact that, at the moment you call this method, this.authservice.currentUserId is null. currentUserId is probably null because the authservice object has not finished initializing: see the doc for more details.

You should either use the onAuthStateChanged observer or check that this.authservice.currentUserId is not null.

Upvotes: 2

Related Questions