Retrieving firebase real time data with Angular

Question

I'm storing data in a Firebase realtime database and I'm trying to get the stored data and it seems I'm not getting it correctly - I need any assistance.

auth.service.ts:

 get_Data() {
  return firebase.database().ref('transfer/').on('value', (snapshot) => {
    this.transfer = snapshot.val();
     console.log('snapshot here',  this.transfer);
  })
 }

returns

app.component.ts:

 dataList(){
       this.list = this.authService.get_Data();
       console.log('got you', this.list)
    }

returning undefined ...

Please check my repo using real-time data from Firebase in React github.com/progamandoconro/Firebase-Real-Time-Web-Admin-App, it may help to sollve the issue. — programandoconro, Commented Apr 13, 2020 at 14:45
that's great @programandoconro, I don't kinda know React but I saw this in your code useEffect(() => { db().ref('/').on('value', handleReservas); db().ref('/').on('value', handleData) }, [userID]); kindly elaborate a bit comparing to mine code — lliance, Commented Apr 13, 2020 at 15:02
I am happy it helped you. It is more elaborated because I am managing the states of the data, so I can share it in through the App. — programandoconro, Commented Apr 13, 2020 at 15:13

Peter Haddad · Accepted Answer · 2020-04-13 15:55:16Z

1

Try the following:

 get_Data() {
  return new Promise((resolve, reject) => {
     firebase.database().ref('transfer/').on('value', (snapshot) => {
     this.transfer = snapshot.val();
     resolve(snapshot.val());
     console.log('snapshot here',  this.transfer);
   });
  });
 }

Then inside your component, you can do:

 dataList(){
       this.authService.get_Data().then((value) => {
       console.log(value);
        });
    }

Check here for more info:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

edited Apr 13, 2020 at 15:55

answered Apr 13, 2020 at 15:37

Peter Haddad

81.1k26 gold badges145 silver badges148 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Retrieving firebase real time data with Angular

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related