Firebase angularfire2 get object from database

Question

I have a problem using an object i get from my firebase db. I can recieve the json file without any problems as you can see on the picture below. https://i.gyazo.com/6c1c69aca47f92a4e1029bb019042ab2.png

<h1>{{ item | async | json}}</h1>

the above code is in /src/app/app.component.html ,

this recieves the item object from /src/app/app.component.ts

import { Component } from '@angular/core';
import { AngularFire, FirebaseObjectObservable } from 'angularfire2';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent {
    item: FirebaseObjectObservable<any>;
    constructor(af: AngularFire) {
        this.item = af.database.object('/releases/');
}
}

I also have tried using item.name.$value but it doesn't work. I would want to get the values in the json file. And be able to use them in the website.

Answer 1

First you don't need the beginning and ending slash when searching for the object, this will work:

af.database.object('releases')

Next, you don't need the json pipe because firebase objects are already in json notation. Your html can look like this:

<h1>{{ item | async }}</h1>

Typically, however, instead of using your firebase async object directly on your template, you would pass it into a presentation component (also known as a dumb component). The presentation component doesn't need to know anything about the asynchronous behavior of your object, it just needs to handle how to generate the html. This is a common pattern when dealing with async objects in your template.

So your html would become:

<my-child-component [item]="item | async">

The child component:

@Component({
    selector: 'my-child-component',
    template: '<h1>{{ item }}</h1>'
})
export class MyChildComponent {
    @Input() item: any;
    ...

Answer 2

as described here

https://github.com/angular/angularfire2/blob/master/docs/2-retrieving-data-as-objects.md#retrieve-data

try:

<h1>{{ (item | async)?.gore}}</h1>