AngularFire2 Retrieving Data Snapshot

Question

Right now, I am unwrapping my data using the method described in the documentation. However, the documentation states:

AngularFire2 unwraps the Firebase DataSnapshot by default, but you can get the data as the original snapshot by specifying the preserveSnapshot option.

How would I be able to access the "default" unwrapping functionality (read: access the elements of item) without having the manually unwrap the data snapshot?

My data from Firebase looks like this:

{
  testObj : {
    firstName: "beckah",
    lastName: "s"
  }
}

My code (which works) is:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AngularFireDatabase, FirebaseObjectObservable } from 'angularfire2/database';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  item: FirebaseObjectObservable<any>;
  constructor( public navCtrl: NavController,
              public db: AngularFireDatabase ) {
    this.item = db.object('/testObj', { preserveSnapshot: true });
    this.item.subscribe(snapshot => {
      console.log(snapshot.val())
    });
  }
}

Which outputs

Object {firstName: "beckah", lastName: "s"}

How would I be able to do the exact same thing (console.log my item object) without manually unwrapping my snapshot like the documentation states is possible?

Is there some kind of this.item.get("firstName") method?

score 7 · Accepted Answer · 2017-10-11 08:05:49Z

7

With AngularFire, you don't need to worry about snapshots at all. Just subscribe to the AngularObjectObservable, and it will feed you the object.

angularfire2 version 4

this.item$ = this.db.object('/item').subscribe(item => console.log(item));

angularfire2 version 5

this.item$ = this.db.object<Item>('/item').valueChanges().subscribe(item => console.log(item));

You should not subscribe in the constructor. Subscribe in onNgInit. Then make sure to unsubscribe in onNgDestroy to avoid memory leaks.

In many cases, you don't need to subscribe at all--let Angular do it in the template, using the async pipe:

angularfire2 version 4

// component
public item$: FirebaseObjectObservable<Item>;

ngOnInit() {
  this.item$ = this.db.object('/item');
}

// template
<div *ngIf="item$ | async as item">
  First name is {{item?.firstName}}.
</div>

angularfire2 version 5

// component
public item$: Observable<Item>;

ngOnInit() {
  this.item$ = this.db.object<Item>('/item').valueChanges();
}

// template
<div *ngIf="item$ | async as item">
  First name is {{ item?.firstName }}
</div>

edited Oct 11, 2017 at 8:05

answered Jun 27, 2017 at 18:04

user663031

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

4 Comments

bee Over a year ago

When you reference AngularObjectObservable, do you mean rxjs/Observable?

user663031 Over a year ago

Sorry, I meant FirebaseObjectObservable, which is a subclass of Observable.

bee Over a year ago

No problem :) In that case though, I don't think you can subscribe to a result and do an assignment at the same time. You'll get the error Type 'Subscription' is not assignable to type 'FirebaseObjectObservable<any>'. But you can pop in an anonymous function in the second argument that console.logs and does an assignment. Regardless, this helped tremendously especially how to asychronously listen with the template.

bee Over a year ago

Also, I can't edit your answer, but for others who find this answer helpful, it might be worth adding {{ testObj$?.firstName }} to show how to display a specific field

Collectives™ on Stack Overflow

AngularFire2 Retrieving Data Snapshot

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related