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

Question

I'm making a get to an API in my Angular project and I get this JSON:

 {
        "id": 16,
        "poste": "ameur taboui",
        "desciption": "f",
        "service": "f",
        "creationDate": "2022-10-13",
        "updatedDate": "2022-10-24",
        "active": true,
        "personnelPosteListe": {
            "id": 1,
            "nomPersonnel": "ADMIN",
            "prenomPersonnel": "ADMIN",
            "matricule": 2564,
            "dateNaissance": "2022-07-26",
            "cin": 7858585,
            "telephone": 2554884,
            "adresse": "tunis",
            "dateAff": "2022-07-26",
            "dateFinAff": "2022-07-26",
            "typeContrat": "test",
            "champInterim": "f",
            "active": true
        },
       
    },

I try to access personnelPosteListe in my HTML, but I got the error

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. Any help on this? This is my TS file:

onGetPosteListeByID() {
    this.grhService
      .getPosteListeById(this.id)
      .pipe(takeUntil(this.onDestroy$))
      .subscribe(
        (data) => {
          this.poste = data;
          console.log(this.poste);
        },
        (err) => {
          console.log(err);
        }
      );
  }
}

This is my HTML :

<table class="table table-striped table-hover  table-bordered text-center table-centre table-res">
                    <thead class="thead-light">
                        <tr>
                            <th> {{"Nom" | translate }} </th>
                            <th> {{"Prénom" | translate }}</th>
                            <th> {{"Type de contrat" | translate}}</th>
                            <th> {{"Matricule" | translate }}</th>
                            <th> {{"Telephone" | translate }}</th>

                        </tr>
                        <tr *ngFor="let b of poste?.personnelPosteListe ; trackBy: trackByMethod ">
                            <td> {{ b?.nomPersonnel}}</td>
                            <td> {{ b?.prenomPersonnel }}</td>
                            .
                            .
                            .
                            .
                        </tr>

                    </thead>
    </table>

Answer 1

The error occurs because personnelPosteListe is an object in your case and ngFor requires an array here.

It might a a server issue, that you get just an object instead of an array in case the personnelPosteListe has a length of 1. Some API's act like this. You could force it to be an array on client side:

onGetPosteListeByID() {
    this.grhService.getPosteListeById(this.id).pipe(
      map(data => {
        if(Array.isArray(data.personnelPosteListe)) return data;
        return { ...data, personnelPosteListe: [data.personnelPosteListe]};
      }),
      takeUntil(this.onDestroy$),
    ).subscribe(
        (data) => {
          this.poste = data;
          console.log(this.poste);
        },
        (err) => {
          console.log(err);
        }
      );
  }
}

Answer 2

Error here is due to fact that poste?.personnelPosteListe in your json is an object, while ngfor can accept only array. Either convert this listen to an array on js side or on server side

Answer 3

I have read your article,you can use KeyValuePipe to get 'nomPersonnel' and 'prenomPersonnel'

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

Oh, and you can also check out this post ,maybe have other good ideas