Angular Cannot find a differ supporting object object Object of type object NgFor only supports binding to Iterables such as Arrays

Question

I ve created an angular app which gets data from a json file  But I m having issues with showing the data in html  A lot of variables are in dutch  I m sorry for that  I m also a bit new to all of this     This is my service   import  Injectable  from   angular core   import  Http  RequestOptions  Response  Headers  from   angular http   import  Observable  from  rxjs   import  Afdelingen  from    models     Injectable   export class AfdelingService     private afdelingenUrl     assets backend afdelingen json       constructor private http  Http                   getAfdelingen    Observable lt Afdelingen   gt            return this http get this afdelingenUrl             map this extractData             catch this handleError                  private extractData res  Response            let body    lt Afdelingen   gt res json            return body                       private handleError error  any   Promise lt any gt            console error  An error occurred   error           return Promise reject error message    error                  addAfdeling afdelingsNaam  string  afdeling  any   Observable lt Afdelingen gt            let body   JSON stringify   afdelingsNaam   afdelingsNaam  afdeling  afdeling            let headers   new Headers   Content-Type    application json             let options   new RequestOptions  headers  headers            return this http post this afdelingenUrl  body  options             map res   gt   lt Afdelingen gt  res json               catch this handleError                  This is part of my json file        afdelingen                  afdelingsNaam    pediatrie          kamernummer   3 054         patientid   10001         patientennaam    Joske Vermeulen          reden    Appendicitis          opname    12 05 2017          ontslag    28 06 2017          behandelingstype    nazorg          behandelingsomschrijving    wondverzorging          behandelingsdatum    10 06 2017          behandelingstijd    10 20          vegitarisch   false         Opmerkingen              sanitair   true         kinderverzorgingsruimte   false         salon   true         hulp   true         width   5         height   5                     afdelingsNaam    pediatrie          kamernummer   3 055         patientid   10002         patientennaam    Agnes Vermeiren          reden    Beenbreuk          opname    18 05 2017          ontslag    30 06 2017          behandelingstype    nazorg          behandelingsomschrijving    wondverzorging          behandelingsdatum    10 06 2017          behandelingstijd    10 20          vegitarisch   true         Opmerkingen              sanitair   true         kinderverzorgingsruimte   false         salon   true         hulp   false         width   5         height   5           The Component   import  Component  OnInit  Input  from   angular core   import  Afdelingen  from     models   import  AfdelingService  from     afdeling service   import  PatientService  from     patient service      Component     selector   app-afdeling     templateUrl     afdeling component html     styleUrls      afdeling component css      export class AfdelingComponent implements OnInit     afdeling  Afdelingen     errorMessage string     constructor private afdelingService  AfdelingService  private patientService  PatientService         ngOnInit         this getData          getData         this afdelingService getAfdelingen          subscribe          data   gt              this afdeling   data            console log this afdeling              error   gt  this errorMessage    lt any gt  error            and the html    lt ul gt     lt li  ngFor  let afd of afdeling  gt        afd patientid      lt  li gt   lt  ul gt

User · Answer

You only need the async pipe    lt li  ngFor  let afd of afdeling   async  gt        afd patientid    lt  li gt    always use the async pipe when dealing with Observables directly without explicitly unsubscribe

User · Answer

I was the same problem and as Pengyy suggest  that is the fix  Thanks a lot   My problem on the Browser Console        PortafolioComponent html 3 ERROR Error  Error trying to diff   object   Object    Only arrays and iterables are allowed        In my case my code fix was     productos service ts import   Injectable   from   angular core   import   Http   from   angular http     Injectable   export class ProductosService      productos any           cargando boolean   true     constructor  private http Http        this cargar productos           public cargar productos         this cargando   true       this http get  https   webpage-88888a1 firebaseio com productos json          subscribe  res   gt            console log res json             this cargando   false          this productos   res json   productos     Before this productos   res json

User · Answer

As the error messages stated  ngFor only supports Iterables such as Array  so you cannot use it for Object   change   private extractData res  Response      let body    lt Afdelingen   gt res json      return body                 here you are return an object     to   private extractData res  Response      let body    lt Afdelingen   gt res json   afdelingen        return array from json file   return body               also return empty array if there is no data

User · Answer

Remember to pipe Observables to async  like  ngFor item of items    async  where  you are trying to  ngFor item of items  where items  is obviously an Observable because you notated it with the   similar to items   Observable lt IValuePair gt   and your assignment may be something like this items    this someDataService someMethod lt IValuePair gt    which returns an Observable of type T   Adding to this    I believe I have used notation like  ngFor item of  items    async   someProperty

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

Examples related to json

Examples related to angular

Examples related to angular-services

Examples related to angular-ngfor