How can I access the snapshot for global variable

Question

Here is the function I am using for accessing the firebase data.

export class SubscriptionProductComponent implements OnInit {

  private products: any;
  private customer: any;

  constructor(private database: AngularFireDatabase,private route: Router) { 
      this.customer = this.database.database.ref().child('/Products/');

    this.customer.orderByChild("productType").equalTo("subscription").on('value', function (snapshot) {
      console.log(snapshot.toJSON());
      this.products = snapshot.toJSON();
      console.log(this.products);
    });
 }

  ngOnInit() {}

  //Some other function are here
}

I am getting the error that

core.js:6210 ERROR TypeError: Cannot set property 'products' of undefined
    at subscription-product.component.ts:34
    at valueCallback (index.esm.js:14463)
    at CallbackContext.push.6Uf2.CallbackContext.onValue (index.esm.js:12274)
    at index.esm.js:13118
    at exceptionGuard (index.esm.js:638)
    at eventListRaise (index.esm.js:11082)
    at eventQueueRaiseQueuedEventsMatchingPredicate (index.esm.js:11057)
    at eventQueueRaiseEventsForChangedPath (index.esm.js:11044)
    at repoOnDataUpdate (index.esm.js:11261)
    at PersistentConnection.repo.server_ [as onDataUpdate_] (index.esm.js:11163)

Please help me with this one.

Where you you define `this.products`? It seems that there is no variable named `products`. — , Apr 30 '21 at 17:47
It is at the beginning of the code right after the class declaration as usually, we do. — Kunal Chikte, Apr 30 '21 at 17:51
yes, @Lynx242 console.log(snapshot.toJSON()); returns the exact output as it needs to be. But the problem is how can I access it globally? — Kunal Chikte, Apr 30 '21 at 17:55
‘this’ inside the callback (this.products) is not what you expect it to be. Change the function in the callback to an arrow and you should be fine. function (snapshot) Should be (snapshot) => — MikeOne, Apr 30 '21 at 17:57
Sorry @MikeOne. I was actually typing the same while you already answered. — , Apr 30 '21 at 18:00
Thank you very much guys, this was an easy solution but wasted hours debugging on this. — Kunal Chikte, Apr 30 '21 at 18:10

score 1 · Accepted Answer · answered Apr 30 '21 at 17:59

1

Do it with an arrow function:

this.customer.orderByChild("productType").equalTo("subscription").on('value', (snapshot) => {
  console.log(snapshot.toJSON());
  this.products = snapshot.toJSON();
  console.log(this.products);
});

answered Apr 30 '21 at 17:59

It worked with the arrow function buddy. Thank You very much @Lynx242 – Kunal Chikte Apr 30 '21 at 18:07

How can I access the snapshot for global variable

1 Answers1