How to access object's array value in interpolation?

Question

This is my json data:

I want to access marked key (fundAllocated) in interpolation but I am not able to access it. It is in schemeFunds array. How can I access it?

This is what I tried:

<ng-container *ngIf="financialManagementData && financialManagementData.length">
  <tr *ngFor="let fManagement of financialManagementData">
    <td>{{fManagement.name}}</td>
    <td>
      <ng-container *ngIf = "fManagement['selectedScheme']; else showFundAmount; 
       let i = index">
        <div class="form-group mb-0">
          <div class="d-flex justify-content-center">
            <div>
              <input type="text" class="form-control fund-amount height-30"
              [(ngModel)]="fManagement.fundAmount" name="fundAmount">
            </div>
            <div>
              <button class="btn btn-primary btn-sm color-white mb-0" 
              (click)="fManagement['selectedScheme'] = 
              fManagement['selectedScheme'];">
                Save
              </button>
            </div>
          </div>
        </div>
      </ng-container>
      <ng-template #showFundAmount>
        <div class="d-flex justify-content-center">
          <div class="fund-amount">
            {{fManagement['schemeFunds']['fundAllocated']}}
          </div>
          <span class="text-primary f_16 c_p">
            <i class="fas fa-edit" (click)="fManagement['selectedScheme'] = ! 
            fManagement['selectedScheme']; checkIsEditable(fManagement)"></i>
          </span>
        </div>
      </ng-template>
    </td>
    <td>{{fManagement.fundUtilized}}</td>
    <td>{{fManagement.balance}}</td>
    <td>
      <button class="btn btn-primary btn-sm color-white mb-0" 
      (click)="createTransaction(fManagement)">
        Create Transaction
      </button>
    </td>
  </tr>
</ng-container>

Answer 1

You either need to have an additional *ngFor loop specifically for the schemeFunds array

<ng-template #showFundAmount>
  <div class="d-flex justify-content-center">
    <ng-container *ngFor="let amount of fManagement['schemeFunds']">
      <div class="fund-amount">{{amount['fundAllocated']}}</div>
    </ng-container>
    <span class="text-primary f_16 c_p">
      <i class="fas fa-edit"
        (click)="fManagement['selectedScheme'] = ! fManagement['selectedScheme']; checkIsEditable(fManagement)"></i>
    </span>
  </div>
</ng-template>

Or if you're sure the schemeFunds array will always only have a single element, you could access the 0th element of the array directly.

<ng-template #showFundAmount>
  <div class="d-flex justify-content-center">
    <div class="fund-amount">{{fManagement['schemeFunds'][0]['fundAllocated']}}</div>           <!-- element at 0th position -->
    <span class="text-primary f_16 c_p">
      <i class="fas fa-edit"
        (click)="fManagement['selectedScheme'] = ! fManagement['selectedScheme']; checkIsEditable(fManagement)"></i>
    </span>
  </div>
</ng-template>

BTW if case 2 applies, you need to adjust it in the backend to send the schemeFunds as an object instead of an array with a single element. Then you could access the fundAllocated directly without the array key: fManagement['schemeFunds']['fundAllocated']

Show 0 if fundAllocated isn't available

You could just append an OR in the interpolation expression to show 0 if the property isn't available.

<div class="fund-amount">{{fManagement['schemeFunds'][0]['fundAllocated'] || 0}}</div>

Answer 2

Looks like you are trying to get property directly even though it is a property of an array element.

So instead of doing this fManagement['schemeFunds']['fundAllocated'] it should actually be fManagement['schemeFunds'][0]['fundAllocated']. It takes schemeFunds element (which contains an array), selects first array element (index 0) and takes property fundAllocated of that element.

Edit: Most probably you'll need to iterate through array with ngFor and display the intended information for each element in schemeFunds array.

Answer 3

One more thing to notice in your code, you need to pass context to the ng-template #showFundAmount, currently it has no access to fManagement.

*ngIf = "fManagement['selectedScheme']; else showFundAmount; let i = index"

becomes

*ngIf = "fManagement['selectedScheme']; else showFundAmount;context : { $implicit : fManagement }; let i = index; "

and your ng-template becomes :

<ng-template #showFundAmount let fManagement>