Angular: Problem accessing array of objects in *ngFor loop while string interpolation displays data in html but with error ctx is undefined in console

Question

.HTML FILE

<span class="total">Available Vaccines:</span>
   {{ vaccinationData?.sessions[0]?.center_id}} // This displays data on html with               //ctx.vaccinationData.sessions is undefined
    <ng-container *ngFor="let data of vaccinationData.sessions" > <!-- This does not loop -->
        <mat-card class="card">
            <mat-card-header>
                <!-- <mat-card-title>{{ data?.center_id }}</mat-card-title>
                <mat-card-subtitle>{{ data?.address }}</mat-card-subtitle> -->
            </mat-card-header>
        </mat-card>
      </div>
    </ng-container>

.ts FILE

import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
import { ServicesComponent } from '../../models/services/services.component';


@Component({
  selector: 'vaccine-available-slot-view',
  templateUrl: './available-slot-view.component.html',
  styleUrls: ['./available-slot-view.component.scss'],
  /* changeDetection: ChangeDetectionStrategy.OnPush, */
})
export class AvailableSlotViewComponent {

  
  constructor(private apiData: ServicesComponent){
    this.apiData.getVaccineData().subscribe(data=>{
      console.warn(data);
      this.vaccinationData=data;
      console.warn(this.vaccinationData?.sessions);
    })
  }
  vaccinationData: any =[];
}

Api data https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/findByDistrict?district_id=141&date=05-07-2021

Error on console while reading line 2 in .html file ERROR TypeError: ctx.vaccinationData.sessions is undefined — Mayank Sati, Jul 02 '21 at 06:18
console.warn was simply for checking if I was receiving data or not. I should have removed them. — Mayank Sati, Jul 02 '21 at 06:19
It works now thank you very much. I was stuck in it for two days. So was I trying to save api data object into an array? — Mayank Sati, Jul 02 '21 at 06:27
Yes exactly. Also, it's not a good practice defining your objects as `any` so to avoid this type of problems it's better to spend some more time strong typing your objects. Which is the biggest value of typescript. Like the answer below states — SakisTsalk, Jul 02 '21 at 06:30

score 0 · Accepted Answer · answered Jul 02 '21 at 06:23

Assuming the data structure you receive from the API match what you wrote in the HTML, remember that calling an API in asynchronous and takes a bit of time.

Until data from the API are available, your vaccinationData attribute is set as [] which:

doesn't match what the HTML expects to work properly
is not even of the correct type, this should probably be an {} (empty object) or null

You should:

type correctly your data, using Typescript but defining variables as any defeat the whole purpose
in the HTML, add a *ngIf to display the block only if the data are available (either using the data directly as a condition or an additional Boolean flag)

Thank you Sir. For the valuable feedback. – Mayank Sati Jul 02 '21 at 06:31 — Mayank Sati, Jul 02 '21 at 06:31

Angular: Problem accessing array of objects in *ngFor loop while string interpolation displays data in html but with error ctx is undefined in console

1 Answers1