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

Issue

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>

Answered By - Naren Murali