I'm trying to get data from my ASP.NET Core 6 back-end to Angular and I run into a problem:

Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed

export class EmployeesListComponent {

  employees: Employee[] = [];

  constructor(private employeesService: EmployeesService) {}

  ngOnInit() : void {
      this.employeesService.getAllEmployee()
          .subscribe ({
               next: (employees) => {
                   console.log(employees);
                   this.employees = employees;
               },
               error: (response) => {
                   console.log(response);
               }
          });
    }
}

enter image description here

I use console.log to see the data and it exists

<div >
    <h1 class = "mb-3"> Employees </h1>
    <table  >
        <thead>
            <tr>
                <th>id</th>
                <th>FirstName </th>
                <th>LastName</th>
                <th>DateOfBirth </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let employee of employees" >
                <td>{{employee.Id }}</td>
                <td>{{employee.FirstName}}</td>
                <td>{{employee.LastName}}</td>
                <td>{{employee.DateOfBirth}}</td>
            </tr>
        </tbody>
    </table>
</div>

CodePudding user response：

you are trying to iterate over an object it should be an array instead .By looking into your console log you can see your data is inside the data property and you need to loop on the data from api instead of the response so changing your component code to

this.employeesService.getAllEmployee()
.subscribe ({
  next: (resp) =>{
   console.log(resp.data);
   this.employees = resp.data; //here it should be resp.data
  },
  error: (response) =>{
   console.log(response);
 }
 });

should fix the issue

CodePudding user response：

I solve it

  employees: Employee[] = [];

  constructor(private employeesService: EmployeesService) {}
  ngOnInit():void{
this.employeesService.getAllEmployee()
.subscribe ({
next: (employees:any) =>{
 console.log(employees?.data);

this.employees = employees['data'];