CODEWITHSUNDEEP
jsonangularapiasp.net-web-apiangular9
Brody
Brody

Reputation: 35

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor Angular 9

I tried so many solutions none of them are not working. please help me to solve this. I need to loop through JSON objects. below is what I tried and my JSON code. I can print the Section name in tr tag but I cannot print the School object Name in the tr tag.

service.ts

  getSections(): Observable<Section> {
     return this.http
      .get<Section>(this.apiUrl + 'sections/all')
      .pipe(
      retry(2),
       catchError(this.handleError),
      );
  }

Component.ts

 getSections() {
  this.service.getSections().subscribe(response => {
  Object.assign(this.sectionData, response);
  console.log(response);
  });
}

component.html

   <table class="table table-hover">
    <thead class="thead-light">
    <tr>
      <th>#</th>
      <th>Section Name</th>
      <th>School Name</th>
    </tr>
    </thead>
    <tr *ngFor="let pro of sectionData ;let i=index">
      <td [hidden]="true">{{pro.sectionID}}</td>
      <td>{{i + 1}}</td>
      <td>{{pro.Name}}</td>
      <ng-container *ngFor="let sch of pro.School">
        <td>{{sch.Name}}</td>
      </ng-container>
    </tr>
  </table>

My JSON

[{
"$id": "1",
"SectionID": 1,
"SchoolID": 6,
"Name": "Grade 1",
"Active": true,
"Tstamp": null,
"Classes": [],
"School": {
    "$id": "2",
    "SchoolID": 6,
    "Name": "Yalpanam",
    "AlternativeName": "سصر ءصيص",
    "TelephoneNumber": "16556489",
    "URL": "",
    "EmailID": "",
    "Longitude": null,
    "Latitude": null,
    "Active": true,
    "Tstamp": null,
    "ClassSections": [],
    "NonStaffs": [],
    "Principals": [],
    "Students": []
}
}]

The error which I get is Error Msg

Upvotes: 1

Views: 35

Answers (1)

TotallyNewb
TotallyNewb

Reputation: 4790

In you JSON, School is not an array - it is an object. So you can't iterate over it. To fix that, in your markup change:

  <ng-container *ngFor="let sch of pro.School">
    <td>{{sch.Name}}</td>
  </ng-container>

to simply

  <td>{{pro.School?.Name}}</td>

Upvotes: 2

Related Questions