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

Question

I looked at similar questions  but none of them helped me  I am going to receive an object like the following              id   1       name    Safa        email    neerupeeru mail ee        purpose    thesis        programme    Software Engineering        year   2016       language    Estonian        comments    In need of correcting a dangling participle         status    RECEIVED                id   2       name    Safa        email    neerupeeru mail ee        purpose    thesis        programme    Software Engineering        year   2016       language    Estonian        comments    In need of correcting a dangling participle         status    RECEIVED                id   3       name    Salman        email    neerupeeru mail ee        purpose    thesis        programme    Software Engineering        year   2016       language    Estonian        comments    In need of correcting a dangling participle         status    RECEIVED          and here is my http service to receive it   getRequest            return this  http get  http   consultationwebserver herokuapp com requests   map res   gt  res json             and finally  in the i called the service in this way   requests      constructor private  http requestService        ngOnInit            this requests this  http getRequest   subscribe res  gt this requests res           Unfortunately  when the page loads it complains with   Cannot find a differ supporting object   object Object   of type  object   NgFor only supports binding to Iterables such as Arrays    So  what is going wrong with this code

User · Answer

In you use spring boot with  Angular   make sure that whether you create default

User · Answer

i have faced same problem   my initial json    items                            id  1               Name   test4                             id  2               Name   test1                              i have changed my json inside        items                            id  1               Name   test4                             id  2               Name   test1

User · Answer

Store that objects into Array  and then iterate the Array export class AppComponent     public obj  object  null   public myArr        constructor         this obj           jon    username   Jon   genrePref   rock          lucy    username   Lucy   genrePref   pop          mike    username   Mike   genrePref   rock          luke    username   Luke   genrePref   house          james    username   James   genrePref   house          dave    username   Dave   genrePref   bass          sarah    username   Sarah   genrePref   country          natalie    username   Natalie   genrePref   bass             ngOnInit        this populateCode           populateCode        for  let i in this obj        Pay attention to the  in      console log this obj i        this myArr push this obj i                   lt div  ngFor  quot let item of myArr  quot  gt        item username         item genrePref      lt  div gt

User · Answer

To iterate over an object which has a json format like below       mango      color    orange    taste    sweet       lemon      color    yellow    taste    sour         Assign it to a variable  let rawData      mang          lemon           Create a empty array s  for holding the values or keys   let dataValues         For values  let dataKeys         For keys Loop over the keys and add the values and keys  to variables  for let key in rawData        Pay attention to the  in      dataValues push rawData key        dataKeys push key      Now you have an array of keys and values which you can use in  ngFor or a for loop  for let d of dataValues        console log  Data Values  d        lt tr  ngFor  let data of dataValues  gt         lt  tr gt

User · Answer

You should use async pipe  Doc  https   angular io api common AsyncPipe  For example    lt li  ngFor  let a of authorizationTypes   async  value   a id  gt          a name     lt  li gt

User · Answer

Remove this requests from  ngOnInit      this requests this  http getRequest   subscribe res  gt this requests res       to  ngOnInit      this  http getRequest   subscribe res  gt this requests res       this  http getRequest   returns a subscription  not the response value  The response value is assigned by the callback passed to subscribe

User · Answer

Just declare the var as an array in which you holding the data   it worked for me   listingdata Array lt any gt        this listingdata   data results rows    and loop the listingdata on html page

User · Answer

PARSE THE RESULT TO JSON OBJECT  JSON prase result arrayOfObjects               I came to this page after I faced this issue  So  my issue was that the server is sending array of objects in the form of string  It is something like this   when I printed result on console after getting from server it is string    arrayOfObject                          id    123    designation    developer                        id    422    designation    lead                       So  I have to convert this string to JSON after getting it from server  Use method for parsing the result string that you receive from server   JSON parse result arrayOfObjects

User · Answer

There you don t need to use this requests  when you are making get call then requests will have observable subscription   You will get a response in observable success so setting  requests value in success make sense which you are already doing     this  http getRequest   subscribe res  gt this requests res

User · Answer

lt ul gt   lt li  ngFor    let Data of allDataFromAws    async  gt     lt pre gt     Data   json   lt  pre gt   lt  li gt   lt  ul gt    use async to convert allDataFromAws into Array Object

User · Answer

I had the same error because I have mapped the HTTP response like this   this http get url  map res   gt  res json     Note how I accidentally called  json like a variable and not like a method   Changing it to   this http get url  map res   gt  res json       did the trick

User · Answer

My solution is create a Pipe for return the values array or propierties object  import   Pipe  PipeTransform   from   angular core     Pipe     name   valueArray      export class ValueArrayPipe implements PipeTransform         El parametro object representa  los valores de las propiedades o indice   transform objects   any             return Object values objects           The template Implement   lt button ion-item  ngFor  let element of element list   valueArray   gt         element any property     lt  button gt

User · Answer

this requests res here you are trying to assign following response to object     headers    normalizedNames      lazyUpdate  null   status  200  statusText   OK    url   xyz   ok  true  type  4  body          Since  object format is different then response format you have to assign res body part from your response to get required contents

User · Answer

For anyone else with this issue that arrives here via Google  please check that the host element of the  ngFor directive is accurate   By this  I mean that I encountered this error and spent a long time researching fixes before realizing that I had put the  ngFor on an ng-template element instead of on my component I wanted to repeat   Incorrect   lt ng-template  ngFor let group of groups    async      gt     lt my-component  prop1   group key       lt  my-component gt   lt  ng-template gt    Correct   lt my-component  ngFor let group of groups    async   prop1   group key       lt  my-component gt    I know this is an obvious mistake in hindsight  but I hope an answer here will save someone the headache I now have

User · Answer

In your JSOn file  please make below change           data                          id   1           name    Safa            email    neerupeeru mail ee            purpose    thesis            programme    Software Engineering            year   2016           language    Estonian            comments    In need of correcting a dangling participle             status    RECEIVED                            id   2           name    Safa            email    neerupeeru mail ee            purpose    thesis            programme    Software Engineering            year   2016           language    Estonian            comments    In need of correcting a dangling participle             status    RECEIVED                            id   3           name    Salman            email    neerupeeru mail ee            purpose    thesis            programme    Software Engineering            year   2016           language    Estonian            comments    In need of correcting a dangling participle             status    RECEIVED                        And after that    this http get url  map res Response    gt  res json   data     The data is actually the name of tge collection of json file  Please try the code above  I am sure it will work

User · Answer

You can declare the books  on line 2  as an array   title  any    List of books are represted in the bookstore   books  any        constructor private service   AppService      ngOnInit      this getBookDetails       getBookDetails         this service getBooks   subscribe books   gt            this books   books json            console log this books

User · Answer

Here is the solution  When you are receiving array from your database  and you are storing array data inside a variable but the variable defined as object  This time you will get the error  I am receiving array from database and I m stroing that array inside a variable  bannersliders    bannersliders  type is now  any  but if you write  bannersliders  is an object  Like bannersliders any     So this time you are storing array data inside object type variable  So you find that error  So you have to write variable like  bannersliders any   or  bannersliders any      Here I am giving an example   x000D   x000D   lt script src  https   cdnjs cloudflare com ajax libs angular js 1 7 5 angular min js  gt  lt  script gt  bannersliders any    getallbanner        this bannerService getallbanner   subscribe data  gt         this bannersliders  data            x000D   x000D   x000D

User · Answer

i have the same problem  this is how i fixed the problem  first when the error is occurred  my array data is coming form DB like this --    brands  Array 5    id   5ae9455f7f7af749cb2d3740      make sure that your data is an ARRAY  not an OBJECT that carries an array  only array look like this --    5                                         it solved my problem

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

Examples related to angular

Examples related to angular-template