Waiting for array to initialize with data from Firebase before calling methods

Question

I have a Angular service that provides access to Firebase. I have a component in which I want to get the data from Firebase, put that information in an array, and then call some functions on that now initialized array. I'm new to Angular, so I'm not exactly sure how I should implement this behavior. I know subscribe() is asynchronous, and I need to implement my functions such that they are sensitive to this.

graph.component.ts

import { Component, OnInit, OnChanges, ViewChild, ElementRef, Input, ViewEncapsulation } from '@angular/core';
import { EscortService } from '../services/escort/escort.service';
import { Escort } from '../data/escort.data';
import * as d3 from 'd3';

@Component({
  selector: 'app-graph',
  templateUrl: './graph.component.html',
  styleUrls: ['./graph.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class GraphComponent implements OnInit {

       escortList : Escort[] = [];

        constructor(private escortService : EscortService, private element: ElementRef){
        } 

        ngOnInit(){
            this.getData();
            this.generateBarChart();
        }

        getData(){
            var esc = this.escortService.getData();
            esc.snapshotChanges().subscribe(item => {
              this.escortList = [];
              item.forEach(element => {
                    var y = element.payload.toJSON();
                    y["$key"] = element.key;
                    var currentEscort = (y as Escort);
                    if(currentEscort.status == 'Completed'){
                        console.log("escort-list -> ngOnInit() : currentEscort.status = " + currentEscort.status);
                        this.escortList.push(currentEscort);
                     }
              });
           });
        }

Deblaton Jean-Philippe · Accepted Answer · 2018-05-27 00:04:11Z

1

escortList should be Observable.

    private const escortList = new ReplaySubject<Escort[]>();
    get escortList() : Observable<Escort[]> {
        return this.escortList.asObservable();    // this prevents caller from being able to call method 'next' on the subject
    }

    constructor(private escortService : EscortService, private element: ElementRef){
    } 

    ngOnInit(){
        this.getData();
        this.generateBarChart();
    }

    getData(){
        var esc = this.escortService.getData();
        esc.snapshotChanges().subscribe(item => {
          const newEscortList = [];
          item.forEach(element => {
                var y = element.payload.toJSON();
                y["$key"] = element.key;
                var currentEscort = (y as Escort);
                if(currentEscort.status == 'Completed'){
                    console.log("escort-list -> ngOnInit() : currentEscort.status = " + currentEscort.status);
                    newEscortList.push(currentEscort);
                 }
          });
          this.escortList.next(newEscortList);
       });
    }

And then, in your component, you just have to subscribe to the Observable to get updates. Don't forget to unsubscribe.

edited May 27, 2018 at 0:04

answered May 26, 2018 at 23:40

Deblaton Jean-Philippe

11.4k4 gold badges53 silver badges68 bronze badges

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

4 Comments

beh1 Over a year ago

The compiler is telling me there's no .asobservable() function.

Deblaton Jean-Philippe Over a year ago

it was asObservable()

beh1 Over a year ago

Thanks. I've never used these ReplaySubject objects before. Can I iterate through them?

Deblaton Jean-Philippe Over a year ago

You really should, angular is based on Observables, subjects,... You must understand it if you want to understand angular. Have a look at this : alligator.io/rxjs/subjects

bluecouch · Accepted Answer · 2018-05-26 23:36:43Z

1

I had this issue as well. What you need to do is put an *ngIf statement on the component in the app.component.html (or whatever element is directly above yours) checking whether the variable is_loading is equal to false. You can set the is_loading variable in your service, which is set to true on initialization, but to false once you have collected your data.
I hope this helps!

answered May 26, 2018 at 23:36

bluecouch

1933 silver badges12 bronze badges

Collectives™ on Stack Overflow

Waiting for array to initialize with data from Firebase before calling methods

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related