TSH
TSH

Reputation: 39

How to overcome maximum call stack size exceeded in typescript, nodejs & angular

I've been working at debugging this for days now! I'm trying to pull the database values from Firebase Real Time database. But the below snippet

get assessmentForm(): FormGroup {
    return this._assessmentForm as FormGroup;
  }

is throwing an error that triggers

core.js:5967 ERROR RangeError: Maximum call stack size exceeded
    at ResultsComponent.get _assessmentData [as _assessmentData] (results.component.ts:147)
    at ResultsComponent.get _assessmentData [as _assessmentData] (results.component.ts:147)
    at ResultsComponent.get _assessmentData [as _assessmentData] (results.component.ts:147)
    at ResultsComponent.get _assessmentData [as _assessmentData] (results.component.ts:147)

I've implemented snapshot, implemented error handling, my promises aren't nested. Yet the error continues HELP!!

     get _assessmentData():AssessmentInterface {
        return this._assessmentData;
        }
      set _assessmentData(value:AssessmentInterface){
        JSON.stringify(this._assessmentData=value);
      }
      private _assessData:any;
     

      hideWhenNoAssessment = false;
      public resultData: AssessmentInterface[] | undefined =[];
      constructor(private data: AssessmentDataService) { }

      ngOnInit() {
        this.dataState(); // Initialize assessments list when component is ready
        this.defineVariables();

        this.offerOverall;
        
      }
      //valueChanges() method to fetch simple list of assessment list



      dataState() {
        this.data.ReadListAssessment().valueChanges().subscribe(data => {
          if(data.length <= 0){
            this.hideWhenNoAssessment = false
            this.noData = true;
          }else{
            this.hideWhenNoAssessment = true;
            this.noData = false
          }
        });
      }



      defineVariables(){
        const assessmentList = this.data.ReadListAssessment();
        JSON.stringify(assessmentList);
        

       assessmentList.snapshotChanges().pipe(takeUntil(this.destroy$)).subscribe(data =>{
         debugger
        // this.resultData = [];
          this._assessData =this._assessmentData;
          data.forEach(item =>{
            const payLoad = item.payload.toJSON();
            payLoad.$key = item.key;

            this._assessData?.push(payLoad as AssessmentInterface);
            for (let i =0; i< this._assessData?.length; i++){
              this.offerMark = this._assessData[i].offerMark.value;
              this.offerUrgent = this._assessData[i].offerUrgent.value;
        }
      });
    });
    }

Upvotes: 1

Views: 6072

Answers (1)

Myk Willis
Myk Willis

Reputation: 12879

You are recursively calling your getter from within the getter implementation:

get _assessmentData():AssessmentInterface {
    return this._assessmentData;
}

You probably meant to reference a private data member, something like:

private _privateAssessmentData: AssessmentInterface;
get _assessmentData():AssessmentInterface {
    return this._privateAssessmentData;
}

Upvotes: 4

Related Questions