angular - How do I return an array instead of a FirebaseListObservable

Question

I have ng2-charts working on my Angular-cli built application. I'm pretty new, so any help is appreciated. I have data setup on Firebase. I create a method in a service to access that data and when I use this code

getGraphData():Observable<any>{
        var graphData$ = this.af.database.list(`graphdata/${this.uid}`)
          .map(tspa => tspa.map(tpa => tpa.$value))
          .do(console.log);

        graphData$.subscribe();
        return Observable.of([]);
 }

the console logs the correct data.

ex. [1000, 5000, 2000]

the problem is when I change the method to return the result like so:

getGraphData():Observable<any>{
        return this.af.database.list(`graphdata/${this.uid}`)
          .map(tspa => tspa.map(tpa => tpa.$value))
}

and try to assign it to a variable in a component. I always get the console log of:

>FirebaseListObservable

I've seen different methods for getting my desired result such as using flatMap and Observable.combineLatest() but I can't get any other result. I've got json data that I want to assign to a variable as an array in order to display it in my bar chart.

graph.ts

  data$: any;
  form$: any;

  public barChartLabels:string[] = ['Account1', 'Account2', 'Account3', 'Account4', 'Account5', 'Account6', 'Account7'];
  public barChartType:string = 'bar';
  public barChartLegend:boolean = true;

  firstVar:any = [28, 48, 40, 19, 86, 27, 90];
  secondVar:any = [28, 48, 40, 19, 86, 27, 90];

  public barChartData:any[] = [
    {data: this.firstVar, label: 'Series A'},
    {data: this.secondVar, label: 'Series B'}
  ];

i would like to assign firstVar the new Firebase data. Any suggestions?

i usually access the method like this:

 ngOnInit() {
    this.firstVar = this.transactionsS.getGraphData();
    console.log(this.firstVar)

  }

updateGraph(){
   this.firstVar = this.transactionsS.getGraphData()
    console.log(this.firstVar)

}

Answer 1

Waitting for answers