Subscribe is called twice

I’m trying to create a form to submit the details but when I subscribe the service, the subscription is done twice. First with null data and second with actual data.

Component.ts

addBook() {
    this.errorMessage = null;
    this.fireService.getBook(this.bookDetails.isbn).subscribe(data => {
      console.log('subscribe called');
      if (null != data) {
        this.dbox.open(DialogBoxComponent, {
          data: { title: 'Error', content: 'Book is already present in Library. Select Edit book to modify the details', button: false }
        });
        this.errorMessage = 'Book is already present in Library. Select Edit book to modify the details';
      } else {
        this.fireService.addBook(this.bookDetails);
        this.dbox.open(DialogBoxComponent, {
          data: { title: 'Success', content: 'Book has been Added to Database', button: false }
        });
        this.router.navigateByUrl('/add-book');
      }
    });
  }

Service.ts

getBook(id) {
  console.log('called firebase get book');
  return this.db.doc(`/books/${id}`).valueChanges();
}

Below is the image from the console of chrome. This shows that the subscription is called twice but not the firebase service.

Chrome console logs: Image please click to view

chrome console logs

called firebase get book
subscribe called
subscribe called

Please help

18 thoughts on “Subscribe is called twice”

Leave a Comment