Angular Cannot find a differ supporting object object Object

Question

Im following this tutorial  On the way to get list of users from api github Im getting error        Cannot find a differ supporting object   object Object     I think its related to     lt ul gt    lt li  ngFor     user of users  gt     user   json     lt  li gt    lt  ul gt    In my code because before it there was no any error  and im unsure if data come from get request  just clicking didnt give any error  here is my code so far   Component   selector   router   pipes        template     lt div gt   lt form  ngFormModel     searchform  gt         lt input type    text   ngFormControl    input1   gt   lt  form gt        lt button  click     getusers    gt Submit lt  button gt   lt  div gt   lt div gt   lt ul gt       lt li  ngFor     user of users  gt        user   json        lt  li gt   lt  ul gt   lt  div gt   lt router-outlet gt  lt  router-outlet gt     directives   FORM DIRECTIVES     export class router   searchform  ControlGroup  users  Array lt Object gt     input1  AbstractControl   constructor public http  Http  fb  FormBuilder        this searchform   fb group            input1                   this input1   this searchform controls  input1     getusers         this http get  https   api github com  search users q   this input1 value             map response   gt  response json             subscribe          data   gt  this users   data          error   gt  console log error                bootstrap router   HTTP PROVIDERS

User · Answer

I received this error in my code because I'd not run JSON.parse(result).

So my result was a string instead of an array of objects.

i.e. I got:

"[{},{}]"

instead of:

[{},{}]

import { Storage } from '@ionic/storage';
...
private static readonly SERVER = 'server';
...
getStorage(): Promise {
  return this.storage.get(LoginService.SERVER);
}
...
this.getStorage()
  .then((value) => {
     let servers: Server[] = JSON.parse(value) as Server[];
                   }
  );

User · Answer

This ridiculous error message merely means there s a binding to an array that doesn t exist    lt option    ngFor  let option of setting options     value   option     gt    option     lt  option gt    In the example above the value of setting options is undefined  To fix  press F12 and open developer window   When the the get request returns the data look for the values to contain data     If data exists  then make sure the binding name is correct     was the property name correct   setting properNamedOptions   If the data exists  is it an Array   If the data doesn t exist then fix it on the backend

User · Answer

Something that has caught me out more than once is having another variable on the page with the same name    E g  in the example below the data for the NgFor is in the variable requests  But there is also a variable called  requests used for the if-else         lt ng-template  requests gt     lt div class  pending-requests  gt       lt div class  request-list   ngFor  let request of requests  gt         lt span gt    request clientName    lt  span gt       lt  div gt     lt  div gt   lt  ng-template gt

User · Answer

If this is an Observable being return in the HTML simply add the async pipe       observable   async

User · Answer

I think that the object you received in your response payload isn t an array  Perhaps the array you want to iterate is contained into an attribute  You should check the structure of the received data     You could try something like that   getusers       this http get  https   api github com search users q   this input1 value         map response   gt  response json   items      lt ------      subscribe        data   gt  this users   data        error   gt  console log error             Edit  Following the Github doc  developer github com v3 search  search-users   the format of the response is        total count   12     incomplete results   false     items                  login    mojombo          id   1                     type    User          score   105 47857               So the list of users is contained into the items field and you should use this   getusers       this http get  https   api github com search users q   this input1 value         map response   gt  response json   items      lt ------      subscribe        data   gt  this users   data        error   gt  console log error

User · Answer

Missing square brackets around input property may cause this error  For example   Component Foo        Input       bars  BarType        Correct    lt app-foo  bars   smth  gt  lt  app-foo gt   Incorrect  triggering error     lt app-foo bars  smth  gt  lt  app-foo gt

User · Answer

If you don t have an array but you are trying to use your observable like an array even though it s a stream of objects  this won t work natively   I show how to fix this below   If you are trying to use an observable whose source is of type BehaviorSubject  change it to ReplaySubject then in your component subscribe to it like this   Component  this messages    this chatService messages  pipe scan  acc  val    gt      acc  val           Html   lt div class  message-list   ngFor  let item of messages    async  gt

User · Answer

Explanation  You can  ngFor on the arrays  You have your users declared as the array  But  the response from the Get returns you an object  You cannot ngFor on the object  You should have an array for that  You can explicitly cast the object to array and that will solve the issue  data to  data   Solution  getusers         this http get  https   api github com  search users q   this input1 value             map response   gt  response json             subscribe          data   gt  this users    data     Cast your object to array  that will do it          error   gt  console log error

[angular] Angular: Cannot find a differ supporting object '[object Object]'

Examples related to angular

Examples related to angular2-routing

Examples related to angular2-directives

Examples related to angular2-http