title: How to overcome maximum call stack size exceeded in typescript, nodejs & angular
body: <p>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</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>get assessmentForm(): FormGroup {
      return this._assessmentForm as FormGroup;
    }</code></pre>
  </div>
  </div>
  </p>
  <p>is throwing an error that triggers</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>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)</code></pre>
  </div>
  </div>
  </p>
  <p>I've implemented snapshot, implemented error handling, my promises aren't nested. Yet the error continues HELP!!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>     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 =&gt; {
            if(data.length &lt;= 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 =&gt;{
           debugger
          // this.resultData = [];
            this._assessData =this._assessmentData;
            data.forEach(item =&gt;{
              const payLoad = item.payload.toJSON();
              payLoad.$key = item.key;
  
              this._assessData?.push(payLoad as AssessmentInterface);
              for (let i =0; i&lt; this._assessData?.length; i++){
                this.offerMark = this._assessData[i].offerMark.value;
                this.offerUrgent = this._assessData[i].offerUrgent.value;
          }
        });
      });
      }</code></pre>
  </div>
  </div>
  </p>