CODEWITHSUNDEEP
javascriptdatatablesfirebase-realtime-databaseangularfire2
npasco
npasco

Reputation: 59

Convert AngularFire firebaseListObservable Object to plain object

I am using datatables (datatables.net) and am wanting to pull the data for a datable from Firebase using an AngularFire2 to get the object.

However, this gets a FirebaseListObservable Object and I am not sure how to use this with datatables, where I have previously used plain objects.

Is there a way to convert a FirebaseListObservable to a plain object for use in this manner?

component.html

<sa-datatable
            [options]="{
              data: rfis,
              columns: [
                {data: 'rfiNo'},
                {data: 'title'},
                {data: 'status'}
                ]
             }"
            filter="true" tableClass="table table-condenced table-striped table-bordered"
            paginationLength="true" tableClass="table table-striped table-bordered table-hover"
            width="100%">
            <thead>
              <tr>
                <th data-class="expand"><i
                  class="fa fa-fw fa-user text-muted hidden-md hidden-sm hidden-xs"></i>
                  Lot #
                </th>
                <th>
                  Lot Name 1
                </th>
                <th>
                  Lot Name 2
                </th>
              </tr>
            </thead>
          </sa-datatable>

component.ts

import { Component, OnInit } from '@angular/core';
import {FadeInTop} from "../shared/animations/fade-in-top.decorator";
import {RfisData} from "../providers/rfis-data";

@FadeInTop()
@Component({
  selector: 'app-lots',
  templateUrl: './lots.component.html',
  providers: [RfisData]
})
export class LotsComponent implements OnInit {
  rfis: any;
  data: any;

  constructor(
    public rfisService: RfisData
  ) {}

  ngOnInit() {
    this.rfis = this.rfisService.getRfis();
    this.data = this.rfisService.getData();
  }
}

provider.ts

import { Injectable } from "@angular/core";
import { AngularFire, FirebaseListObservable } from 'angularfire2';

@Injectable()
export class RfisData {
  rfis: FirebaseListObservable<any>;
  data: any; 

  constructor(
    af: AngularFire
  ) {

// this just to compare object types
    this.data =[
        {
          "rfiNo": "Frist RFI",
          "status": "open",
          "title": "Its a fucking RFI dude"
        }
      ];    

    this.rfis = af.database.list('/rfis');

  }

  getRfis(){
    console.log(this.rfis);
    return this.rfis;
  }

// this just to compare object types
  getData(){
    console.log(this.data);
    return this.data;
  }

}

The result from console logs shows the two results for the objects, one being a firebaseListObservable object, the other being a plain [Object].

Thank you.

Upvotes: 0

Views: 803

Answers (1)

Robin Dijkhof
Robin Dijkhof

Reputation: 19288

This worked for me:

af.database.object('/some/ref/to/object')
    .map(val => Object.assign(new MyPlainObject(), val);

Upvotes: 1

Related Questions