Angular Firestore - Get document data and assign to variable

Question

I'm trying to assign the data collected from a firestore document to a variable with an Observable type initialised before the constructor.

I've got the data from the collection by passing in a dynamic invoiceId string to the .doc() search, and I can assign the data to a local variable (shown below), but when trying to assign it to this.invoice, I get the following error:

Uncaught (in promise): TypeError: Cannot set property 'invoice' of undefined

-

Component:

import { Component, OnInit, Input } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

import { Observable } from 'rxjs/Observable';

import { AngularFireDatabase } from 'angularfire2/database';

import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';

import { AuthService } from '../../services/auth.service';

import { Invoice } from '../invoiceModel';

@Component({
  selector: 'app-view-invoice',
  templateUrl: './view-invoice.component.html',
  styleUrls: ['./view-invoice.component.scss']
})

export class ViewInvoiceComponent implements OnInit {

  userId: string;

  invoiceId: any;

  invoicesCollection: AngularFirestoreCollection<Invoice>;
  invoices: Observable<Invoice[]>;

  invoice: Observable<Invoice>;

  constructor(private authService: AuthService, private db: AngularFirestore, private route: ActivatedRoute) {
      this.userId = this.authService.user.uid;

      this.route.params.subscribe(params => {
        this.invoiceId = params.id;
      })

      this.invoicesCollection = this.db.collection('/invoices');

      this.invoices = this.invoicesCollection.snapshotChanges().map(changes => {
          return changes.map(a => {
            const data = a.payload.doc.data() as Invoice;
            data.id = a.payload.doc.id;
            return data;
          })
      })
  }

  ngOnInit() {
    this.getInvoice();
  }

  getInvoice() {
    var docref = this.db.collection('/users').doc(this.authService.user.uid).collection('/invoices').doc(this.invoiceId);
    docref.ref.get()
        .then(function(doc) {
            if (doc.exists) {
                var invoice = doc.data(); <------WORKS
                // this.invoice = doc.data(); <------DOESN'T WORK
                console.log('Invoice data: ', doc.data());
            } else {
                console.error('No matching invoice found');
            }
    })
  }

}

Try creating a shallow reference of this. as in getInvoice() { const _that=this; and then within doc.exists try _that.invoice = doc.data() — Guruprasad J Rao
– Guruprasad J Rao, Commented Mar 2, 2018 at 10:39
Just tried that but it means this.invoice still doesn't get the data, I need the data to be made available anywhere in the component, not just in this function — nick.cook
– nick.cook, Commented Mar 2, 2018 at 10:53
Yes.. Probably. because scope of this would not be actually Component since it is within a promise. That's my guess.. So you are able to set it with _that? — Guruprasad J Rao
– Guruprasad J Rao, Commented Mar 2, 2018 at 10:54
Yes, I can set it with that, but it needs to be accessible data anywhere in the scope of the component — nick.cook
– nick.cook, Commented Mar 2, 2018 at 10:55
Yes.. That will be possible. But only in certain places, you won't be having access to the scope with this. But the changes you make with _that actually affects the original variable.. :) — Guruprasad J Rao
– Guruprasad J Rao, Commented Mar 2, 2018 at 10:57

Sterling Archer · Accepted Answer · 2018-05-08 15:42:12Z

1

I was fighting the same thing. It was driving me crazy!! I'm a newbie, but I appear to have solved your issue by changing one line of code:

.then(function(doc) {   //changed from
.then((doc) => {        //changed to (removed the function)

I don't even understand the ramifications of doing so, but the scope is now working to assign the value of the variable.

edited May 8, 2018 at 15:42

Sterling Archer

22.5k19 gold badges86 silver badges121 bronze badges

answered May 8, 2018 at 15:23

HunterD

111 bronze badge

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

1 Comment

thomi Over a year ago

It's because arrow functions do not have the same scope as functions. The latter basically define a new scope for this.

Diego Venâncio · Accepted Answer · 2018-05-21 14:09:07Z

1

If you are using AngularFire you can do:

invoiceCol: AngularFirestoreCollection<Invoice>;
invoiceObservableArray: Observable<Invoice[]>;
invoiceArray: Invoice[];

constructor(private db: AngularFirestore) { } //--injection

getAllInvoice() { //getting data of DB
    this.invoiceCol= this.db.collection('yourInvoiceDbPath');
    return this.invoiceCol.valueChanges();
}

this.invoiceObservableArray.getAllInvoice();//calling method above

this.invoiceObservableArray.subscribe(invoice=> { //converting oberv in array
      this.invoiceArray = invoice;
    });

console.log(this.invoiceArray); //showing in console

answered May 21, 2018 at 14:09

Diego Venâncio

6,0772 gold badges54 silver badges78 bronze badges

Comments

Rishabh Agarwal · Accepted Answer · 2020-07-05 21:49:59Z

1

getInvoice() {

let _this = this; <---***

    var docref = this.db.collection('/users').doc(this.authService.user.uid)
                     .collection('/invoices').doc(this.invoiceId);
    docref.ref.get()
        .then(function(doc) {
            if (doc.exists) {
                var invoice = doc.data(); <------WORKS
                // this.invoice = doc.data(); <------WORKS
                console.log('Invoice data: ', doc.data());
            } else {
                console.error('No matching invoice found');
            }
    })
  }

edited Jul 5, 2020 at 21:49

Rishabh Agarwal

2,1821 gold badge18 silver badges36 bronze badges

answered Jul 5, 2020 at 16:57

Sahan

392 bronze badges

Collectives™ on Stack Overflow

Angular Firestore - Get document data and assign to variable

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related