Empty array despite pushing data to it

Question

I have an array called this.loanAdjustmentList that I am adding data to but it is showing as empty when I need it. I call a service that returns a response to this.loanAdjustmentResult. I have showed response result below.

response

this.loanAdjustmentResult = [
    {
        "newCalculatedInstalmentsNo": "41",
        "newContractEndDate": "20241016",
        "newResidual": "35628.23",
        "newInstalment": "3867.45",
        "newTerm": "59",
        "outBalanceAvaf": null,
        "restructureType": "term"
    },
    {
        "newCalculatedInstalmentsNo": "54",
        "newContractEndDate": "20251116",
        "newResidual": "35628.23",
        "newInstalment": "3128.39",
        "newTerm": "72",
        "outBalanceAvaf": null,
        "restructureType": "instalment"
    },
    {
        "newCalculatedInstalmentsNo": "54",
        "newContractEndDate": "20251116",
        "newResidual": "0",
        "newInstalment": "3867.45",
        "newTerm": "72",
        "outBalanceAvaf": null,
        "restructureType": "balloon"
    }
]

method

  doLoanAdjustmentOptions() {
    this.loanAdjustmentList = [];
    this.subs = this.avafService.confirmData.subscribe((resp) => {
      this.loanAdjustmentResult = resp.calculateAVAFLoanAdjustment.calculatorResults.calculatorResult;
      //search loanAdjustmentResult for which restructure types are allowed in order to set relevent radio button options
      for (let i = 0; i < this.loanAdjustmentResult.length; i++) {
        if (this.loanAdjustmentResult[i].restructureAllowed == "Y") {
          if (this.loanAdjustmentResult[i].restructureType == "balloon") {
            this.loanAdjustmentList.push({
              label: this.translations["balloon"],
              subLabel: this.translations["balloonDescription"],
              name: this.loanAdjustmentResult[i].restructureType,
              checked: this.setupForm.value['reduceoptionRadio'] === 'balloon'
            });
            console.log(this.loanAdjustmentList);
          }
          if (this.loanAdjustmentResult[i].restructureType == "term") {
            this.loanAdjustmentList.push({
              label: this.translations["term"],
              subLabel: this.translations["termDescription"],
              name: this.loanAdjustmentResult[i].restructureType,
              checked: this.setupForm.value['reduceoptionRadio'] === 'term'
            });
          }
          if ( this.loanAdjustmentResult[i].restructureType == "instalment") {
            this.loanAdjustmentList.push({
              label: this.translations["install"],
              subLabel: this.translations["installDescription"],
              name: this.loanAdjustmentResult[i].restructureType,
              checked: this.setupForm.value['reduceoptionRadio'] === 'instalment'
            });
          }
        }
      }
      console.log(this.loanAdjustmentList);
      Object.keys(this.loanAdjustmentResult).forEach((key) => {
        this.calculatorResult = this.loanAdjustmentResult[key];
        //assign calculator new residual value to radio button option labels
        for (let i = 0; i < this.calculatorResult.length; i++) {
          if (this.calculatorResult[i].restructureType == "balloon") {
            const newResidual = this.calculatorResult[i].newResidual;
            let objIndex = this.loanAdjustmentList.findIndex((obj => obj.name == 'balloon'));
            this.loanAdjustmentList[objIndex].label = this.translations["balloon"] + " " + this.utils.convertNumberToCurrency(newResidual);
          }
          if (this.calculatorResult[i].restructureType == "term") {
            const newTerm = this.calculatorResult[i].newTerm;
            let objIndex = this.loanAdjustmentList.findIndex((obj => obj.name == 'term'));
            this.loanAdjustmentList[objIndex].label = this.translations["term"] + " " + newTerm + " " + this.translations["monthsLowerCase"];
          }
          if (this.calculatorResult[i].restructureType == "instalment") {
            const newInstalment = this.calculatorResult[i].newInstalment;
            let objIndex = this.loanAdjustmentList.findIndex((obj => obj.name == 'instalment'));
            this.loanAdjustmentList[objIndex].label = this.translations["install"] + " " + this.utils.convertNumberToCurrency(newInstalment);
          };
          this.showFormData = true;
        }
      });
    })
  }

My issue is that this.loanAdjustmentList is showing as empty. I'm not sure if the values are being set quick enough to the array so that when I want to use it in the Object.keys sub-method, it is available. Any idea?

Answer 1

It's because of you have checked your first condition is

if (this.loanAdjustmentResult[i].restructureAllowed == "Y") {}

But you have not received restructureAllowed this key in your this.loanAdjustmentResult variable data.