Show data charged from asyncronous callback JS

Question

I got a function that accesses to a database on firebase and I get the data doing this:

private chargeData() {
    let ref = firebase.database().ref('users/' + this.auth.uid);
    ref.on('value', function (snapshot) {
      console.log(snapshot.val());
    }, function (error) {
      console.log('Charge data error, ', error.code);
    });
  }

I'm using ionic 3 so I want to keep all that I received on a local variable to show it on the HTML view but I don't know how. I try to initialize a variable like this.userData = snapshot.val(); but an error occurred "This is null".

Use arrow function as callback – Suraj Rao Apr 20 '18 at 11:05 — Suraj Rao, Apr 20 '18 at 11:05

score -1 · Answer 1 · answered Apr 20 '18 at 10:59

Use Angular data-binding

private theData;

private chargeData() {
    let ref = firebase.database().ref('users/' + this.auth.uid);
    ref.on('value', function (snapshot) {
      console.log(snapshot.val());
      this.theData = snapshot.val();
    }, function (error) {
      console.log('Charge data error, ', error.code);
    });
  }

in HTML:

<div class="fancy"> {{ theData }} </div>

further details:

Show data charged from asyncronous callback JS

1 Answers1