ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables Angular 9

0
votes

hello every one i have this error ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables

i tried .json but it s not working in angular 9

My component .html

  <div class="form-group">
                <label for="">Ville</label>
                <select class="form-control" #hh
                    (change)="getidregion(hh.value)">
                    <option></option>
                    <option *ngFor="let ville of dropDownList"
                        [value]="ville.id">
                        {{ville.nomVille}}
                    </option>

                </select>

            </div>

My Component.TS :

dropDownList: [];

  responsable = {

    id: 0,
    nomResponsable: '',
    prenomResponsable: '',
    emailResponsable: '',
    mdpResponsable: '',
    img: '',
    rib: '',
    dtn: '',
    region: 0,
    ville: 0,
  };

    methodAPIToGetVilles() {
        this.res.getville()
          .subscribe((s: any) => {
            this.dropDownList = s;
    
          });
      }
    
      //methode to get the value off the idville in the option
      getidville(id: any): void {
        this.responsable.ville = id;
    
      }
    
      curUser: any = this.responsable[0];

My API Data :

"@context": "/api/contexts/Ville",
    "@id": "/api/villes",
    "@type": "hydra:Collection",
    "hydra:member": [
        {
            "@id": "/api/villes/6",
            "@type": "Ville",
            "nomVille": "Davidboeuf"
        },
        {
            "@id": "/api/villes/7",
            "@type": "Ville",
            "nomVille": "Benoitboeuf"
        }];
2
jsonangularobservableangular9
Your API doesn’t return an array probably? – MikeOne
yes it returns an object i don t know how to convert it – Abdeljabbar El Mediouni
Can you post it? There is a way to loop through an object as well using the keyvalue pipe. – MikeOne
use console.log(this.dropDownList) and check what it showing – Vivek Kapoor
this is My console log : {@context: "/api/contexts/Ville", @id: "/api/villes", @type: "hydra:Collection", hydra:member: Array(30), hydra:totalItems: 403, …} @context: "/api/contexts/Ville" @id: "/api/villes" @type: "hydra:Collection" hydra:member: Array(30) 0: {@id: "/api/villes/6", @type: "Ville", nomVille: "Davidboeuf"} 1: {@id: "/api/villes/7", @type: "Ville", nomVille: "Benoitboeuf"} – Abdeljabbar El Mediouni

2 Answers

1
votes

I suppose you are trying to do something like this:

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

This questions is also answered pretty nicely here:

Iterate over object in Angular

How to loop over object properties with ngFor in Angular

0
votes

If you are using *ngFor, it only supports data is of type array or iterables only.

In your scenario data in your variable dropDownList is either of type object or may be null | undefined. Hence this error occur. Console that data before using it.