Cyclic Object Value Error AngularFire Document ID

Question

I am getting a "Cyclic Object Value" Error in a Angular Project with AngularFire. I am new to Firebase so maybe there is an easy fix for this, but I couldn't find one.

First of all I am querying for a collection in my Firestore DB and later I am trying to Query for another collection with the Document ID from the first one.

This is the relevant code:

foo.service.ts:

async checkOrgas() {
    let orga: any;
    const user = await this.afAuth.currentUser;
    const results = this.db
      .collection('orgas', (ref) => {
        return ref.where('createdBy', '==', user.uid);
      })
      .valueChanges({ idField: 'orgaID' })
      .pipe(take(1));
    return results;
  }

async getOrgaBankings(orgaID: string) {
    const results = this.db.collection('bankings', (ref) => {
      return ref.where('orga', '==', orgaID);
    }).valueChanges({ idField: 'bankingID' });
    return results;
  }

foo.component.ts:

async getOrga() {
    const orgas = await this.orgaService.checkOrgas();

    this.orgasSubscription = orgas.subscribe((val) => {
      this.orga = val[0];
      val.length > 0 ? (this.memberOfOrga = true) : (this.memberOfOrga = false);
  }

async loadOrgaBankingInfo() {
    this.orgaBanking = this.orgaService.getOrgaBankings(this.orga.orgaID);
  }

The exact Error in Firefox is

ERROR TypeError: "cyclic object value"

I have basic understanding about what the error means, but even with that knowledge I don't know how to properly fix it.

Answer 1

If anyone will ever run into a similar issue, here is the answer!

I did sort the issue out, first of all, a JSON Pipe in the HTML of the Component caused the error.

The Problem was in the following function:

async loadOrgaBankingInfo() {
    this.orgaBanking = this.orgaService.getOrgaBankings(this.orga.orgaID);
  }

I forgot to subscribe to getOrgaBankings(), because of that, I used the JSON Pipe on an Observable and not an Array.

After I refactored the function everything worked as expected:

async loadOrgaBankingInfo() {
    this.orgasSubscription.unsubscribe();
    const orgaBanking = await this.orgaService.loadOrgaBankings(
      this.orga.orgaID
    );
    orgaBanking.subscribe((val) => {
      console.log(val);
    });
  }