CODEWITHSUNDEEP
angularfirebasefirebase-realtime-databaseionic3
Sarasa Gunawardhana
Sarasa Gunawardhana

Reputation: 1119

Retrieving data from one to many relation in firebase of ionic 3 angular 4

This is my one to many firebase relation;

{
  "factory_sites" : {
    "site 1" : {
      "Name" : "Factory 1",
      "Address" : "Malabe",
      "factory_site_lines":{
        "-FSL0000001" : {
          "Name" : "Line 1"
        },
        "FSL0000002" : {
          "Name" : "Line 2"
        }
      }
    },
    "site 2" : {
      "Name" : "Factory 2",
      "Address" : "Malabe",
      "factory_site_lines":{
        "FSL0000001" : {
          "Name" : "Line 1"
        },
        "FSL0000002" : {
          "Name" : "Line 2"
        },
        "FSL0000003" : {
          "Name" : "Line 3"
        }
      }
    },
    "site 3" : {
      "Name" : "Factory 3",
      "Address" : "Malabe",
      "factory_site_lines":{
        "FSL0000002" : {
          "Name" : "Line 2"
        },
        "FSL0000004" : {
          "Name" : "Line 4"
        },
        "FSL0000005" : {
          "Name" : "Line 5"
        }
      }
    }
  }
}

This my sample code I wrote to retrieve data;

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

    @Component({
       selector: 'page-factory',
       templateUrl: 'factory.html',
    })
    export class FactoryPage {

        sites: FirebaseListObservable<any[]>;

     constructor(public navCtrl: NavController, public navParams:NavParams,private af: AngularFireDatabase) 
     {
      this.sites = af.list('/factory_sites');
      console.log(this.sites);  
     }
    }

console log result shows ;

Object { _isScalar: false, $ref: Object, source: Object, operator: Object }

I'm developing a ionic mobile application. ionic 3 version with angular 4 using firebase real time database. so I am stuck with retrieving data from one to many relation in firebase. I want to retrieve data of factory sites with child relation also. I tried to access "/factory_sites" path, but result came with empty object. I followed some tutorial but those are not updated and did not fit with my problem . how can I retrieve data from factory_sites with child relation?.

any help would be appreciated? Thank you!

Upvotes: 0

Views: 1025

Answers (1)

sketchthat
sketchthat

Reputation: 2688

You need to subscribe to the data in order to view it. Your trying to view the observable object at the moment.

You can access the data in the html with the async pipe

<div>{{ sites | async }}</div>

Or if you want to access it in your component you can do the following

this.sites.subscribe(sites => {
  console.log(sites);
});

Be careful with subscriptions as Angular doesn't auto unsubscribe, you will need to do this manually.

Upvotes: 1

Related Questions