Search code examples
angulartypescriptngfor

ERROR Error: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. Such as Array


This is the error I'm facing rightnow. (ERROR Error: NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays. Did you mean to use the keyvalue pipe?)

export class StudentDataComponent {

  newdata:any;

  // list = [];

  constructor (private userAPIData:StudentDataService){}

  ngOnInit(): void {
    this.userAPIData.getdata().subscribe(res =>{
      this.newdata= res;
      console.log(this.newdata)
  })
  }
  
}
<tr *ngFor="let user of newdata;">
        <td>{{user.id}}</td>
        <td>{{user.firstName}}</td>
        <td>{{user.lastName}}</td>
        <td>{{user.id}}</td>
 </tr>


Solution

  • newdata is an object datastructure, which is incompatible with *ngFor instead go for the users array inside it, please change the code to below!

    export class StudentDataComponent {
    
      newdata:any = { users: [] };
    
      // list = [];
    
      constructor (private userAPIData:StudentDataService){}
    
      ngOnInit(): void {
        this.userAPIData.getdata().subscribe(res =>{
          this.newdata= res;
          console.log(this.newdata)
      })
    

    }

    <tr *ngFor="let user of newdata.users;">
            <td>{{user.id}}</td>
            <td>{{user.firstName}}</td>
            <td>{{user.lastName}}</td>
            <td>{{user.id}}</td>
     </tr>