How do I display candidate's full name inside job application which is inside job offer from API response

Issue

Components.ts:

ngOnInit(): void {
this.id = this.route.snapshot.params['jobId'];
this.jobService.findJobById(this.id)
.subscribe((data: JobOffer) =>{
  this.job = data;
  console.log(data);
});

I'm using Angular's drag and drop module:

<div cdkDropListGroup>
&nbsp;
<div class="example-container" *ngFor="let items of job.phaseT.items; index as i">
  <h3>{{items.phaseItem}} PHASE</h3>
  
            <div
            cdkDropList id="{{items.id}}" 
            [cdkDropListData]="items.phaseItem"
            class="item-list" 
            [cdkDropListConnectedTo]="connectedTo"
            (cdkDropListDropped)="drop($event)">
              <div class="example-box" *ngFor="let job of job.jobApplications" cdkDrag  [cdkDragData]="job">
                <div class="example-box" *ngFor="let candidate of job.candidate" cdkDrag  [cdkDragData]="job">
                   {{candidate.fullname}} --   {{job.appliedDate | date}} -
                  <button class="button btn-primary" [routerLink]="['/candidateProfile']">View Profile</button>
              </div>
              </div>
            </div>
        </div>
    </div>
</div>

This is what i tried so far, I'm getting the error:

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays

I also tried accessing it using this:

<div class="example-container" *ngFor="let candidate of job.jobApplications.candidate;">

Solution

jobApplications is an array, which is iterable, so *ngFor will work. job.candidate is an object which can be accessed directly by property e.g job.candidate.fullName or iterating over obj candidate's properties using keyvalue pipe.

<div class="example-box" *ngFor="let job of jobApplications" cdkDrag  [cdkDragData]="job">
   {{job?.candidate?.fullname}} --   {{job?.appliedDate | date}} -
  <button class="button btn-primary" [routerLink]="['/candidateProfile']">View Profile</button>
</div>

Answered By - Joosep Parts