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 >
                    <thead >
                        <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>

CodePudding user response：

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

CodePudding user response：

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);
        }
      );
  }
}

CodePudding user response：

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