Error: Value Loop Detected in AngularFire Document ID

I encountered a "Cyclic Object Value" Error while working on an Angular Project with AngularFire. As a beginner with Firebase, I haven't been able to find a straightforward solution to this issue.

The error arises when I query a collection in my Firestore DB and then attempt to query another collection using the Document ID from the initial query.

Below is the relevant code snippet:

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);
  }

I received the following Error message in Firefox:

ERROR TypeError: "cyclic object value"

Although I have a basic understanding of what this error indicates, I am struggling to find a proper resolution for it.

Answer №1

In case someone else faces a similar issue in the future, here is how I resolved it!

Upon investigation, I discovered that a JSON Pipe within the HTML of the Component was causing the error.

The problem stemmed from the function below:

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

I failed to subscribe to getOrgaBankings(), resulting in using the JSON Pipe on an Observable instead of an Array.

Once I made the necessary changes to the function, everything started functioning correctly:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to efficiently compare multiple arrays in Typescript and Angular?

I am faced with a scenario where I have 4 separate arrays and need to identify if any item appears in more than two of the arrays. If this is the case, I must delete the duplicate items from all arrays except one based on a specific property. let arrayA = ...

Encountered an error while trying to install @material-ui/core through npm: Received an unexpected end of JSON input

npm install @material-ui/core npm ERR! Unexpected end of JSON input while parsing near '...X1F+dSMvv9bUwJSg+lOUX' npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\WR-022\AppData\Roaming\npm-cach ...

Tips for eliminating the undefined/null values from an array nested within another array in Angular

DATA = [{ application: [{ name: 'Room1' },{ name: 'Room2' },{ name: 'Room3' },{ name: 'Room4' },{ name: 'Room5' }], name: 'Batch 1&ap ...

Tips for incorporating JavaScript modules into non-module files

Learning how to use js modules as a beginner has been quite the challenge for me. I'm currently developing a basic web application that utilizes typescript and angular 2, both of which heavily rely on modules. The majority of my app's ts files ...

Instructions for removing a specific row from a table by clicking on the icon or button

Currently in my project, I am utilizing the Table with pagination component. My goal is to implement a feature where users can delete a single row at a time by clicking on the delete icon. To showcase what I have tried so far, I have set up a demonstration ...

Tour Of Heroes offers a unique and versatile http create feature

I am currently making my way through the Tour of Heroes tutorial and finding it quite enjoyable. Everything is functioning properly, except for one aspect that has me puzzled - the http adding a hero feature. It seems to automatically know what id to ass ...

Is there a way to retrieve the previously selected mat-tab in an Angular component, even after navigating to other components, without relying on localstorage or services?

Preserving mat-tab selection state between Angular components without relying on localStorage or a service Query: I'm currently developing an Angular application that features multiple components with mat-tab-groups. I would like to maintain the sele ...

Tips for correctly passing the type of combineReducers: I encountered an error saying "Property '...' does not exist on type 'Reducer<CombinedState{}>"

I am currently integrating TypeScript into my react/redux project. Unfortunately, I am encountering an error that is preventing my app from loading. The issue is shown in the screenshot below: https://i.sstatic.net/HkPwo.png Within my index.tsx file, I a ...

Are you looking for a streamlined method to create styled components with MaterialUI?

I am exploring ways to easily define convenient components in my application utilizing Material-UI. After referring to an example from the Material-UI documentation for Appbar, I attempted to incorporate some React components for better readability. My c ...

Having trouble resolving rxjs/operators when using ngx-datatable?

I am attempting to integrate ngx-datatable into my Angular-2 project. I have followed all the steps outlined here, but I encountered the following error: ERROR in ./~/@swimlane/ngx-datatable/release/index.js Module not found: Error: Can't re ...

Leveraging interfaces with the logical OR operator

Imagine a scenario where we have a slider component with an Input that can accept either Products or Teasers. public productsWithTeasers: (Product | Teaser)[]; When attempting to iterate through this array, an error is thrown in VS Code. <div *ngFor= ...

What is the best way to ensure that consecutive if blocks are executed in sequence?

I need to run two if blocks consecutively in TypeScript, with the second block depending on a flag set by the first block. The code below illustrates my scenario: export class Component { condition1: boolean; constructor(private confirmationServic ...

Omit assets in final version

During development (ng serve), I have specific assets like images and styles that I use. These assets are not needed in the production build as they are provided by a CDN. My requirements are: When using ng serve, I want to serve files from the folder . ...

Exploring the implementation of the jquery .counterUp function within Angular 5

I am working on implementing a counter up view for my company's website using the jQuery counterUp function. Despite adding script tags for it, Angular is not recognizing the function. if(st >= hT ){ $('.counter').counterUp({ dela ...

Uncover hidden mysteries within the object

I have a function that takes user input, but the argument type it receives is unknown. I need to make sure that... value is an object value contains a key named "a" function x(value: unknown){ if(value === null || typeof value !== 'obj ...

Displaying data in a table using NgFor and allowing the user to input the number of columns

My component has the capability to accept an array input, such as [1, 2, 3, 4, 5, 6, 7], and a number of columns input. For example, if a user specifies 3 columns, I want to display the data in a table with 3 columns like this: 1 2 3 4 5 6 7 If the ...

Exploring StickIt: Binding the length property from a backbone.Collection

Exploring the use of Backbone, Marionette (1.8.3), StickIt, and TypeScript to effectively bind the length of a Backbone collection in real-time as items are added or removed. As someone new to StickIt, here's my current attempt: export class SomeVie ...

What is the process for utilizing ts-node ESM in conjunction with node modules?

Disclaimer: I understand that the question below pertains to an experimental feature. I have initiated a thread on the ts-node discussion forum. Nonetheless, I believe that posting on StackOverflow will garner more visibility and potentially result in a qu ...

Transforming a typical JSON file into a parent-child hierarchical JSON structure similar to the one utilized in d3's flare.json file format

My JSON file has a specific structure: { "a": "b", "c": "d", "e": { "f": "g", "h": "i" } } I want to transform it into the following structure: { "name": "Root", "parent": "null", "children": [ { ...

Typescript: How to Ensure Tuple Type is Explicit and Not Combined

I have a code snippet that defines a person object and a function to get its values: const person = { name: "abc", age: 123, isHere: true }; const getPersonValues = () => { return [person.name, person.age, person.isHere]; }; const [n ...