Angular - 获取此 ERROR 错误：尝试区分“[object Object]”时出错。 仅允许 arrays 和可迭代对象

Question

Decided to find out what all the fuss was about with Angular. Got a demo app working with a JSON file (using db.json and JSON server from the angular CLI). All working great.

So I get adventurous and decide to build a C# API (as that's the long plan anyway).

Straight away I ran into the CORS problem, and to solve in my ASP.NET config I have (startup.cs)

app.UseCors( options => 
{
    options
    .WithOrigins("http://localhost:4200/")
    .AllowAnyOrigin()
    .AllowAnyMethod()
    .AllowAnyHeader();
});

I output my JSON like this (done this like a thousand times in all my apps)

return Json(new { tasks = _context.Tasks });

In my angular app, I have

//private apiUrl = 'http://localhost:5101/tasks'; //<- this is using json server
private apiUrl = "https://localhost:44363/home/tasks"; //<- this is my asp.net api

constructor(private http: HttpClient) {}

getTasks(): Observable<Task[]> {    
    return this.http.get<Task[]>(this.apiUrl);    
}

My web service spits out the exact same JSON (char for char) as the JSON server but in my browser console (after dealing with the cors problem ) I get this:

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

I've read lots of articles on here about this error but non seem to deal with this situation, (none that I could find anyway) and I checked a fair few

What am I missing?

This is the JSON

{
  "tasks": [
    {
      "id": 1,
      "text": "Doctors Appointment",
      "day": "1st January 2022 at 10:30 AM",
      "reminder": false
    },
    {
      "id": 2,
      "text": "Meeting",
      "day": "5th July 2022 at 11:45 AM",
      "reminder": false
    },
    {
      "id": 3,
      "text": "Car Servicing",
      "day": "15th October 2022 at 8:30 AM",
      "reminder": false
    },
    {
      "id": 4,
      "text": "Cleaner",
      "day": "3rd November 2022 at 10:00 AM",
      "reminder": false
    },
    {
      "id": 5,
      "text": "Dinner",
      "day": "6th July 2022 at 7:50 PM",
      "reminder": false
    }
  ]
}

Answer 1

Based on your JSON, HttpGet expects to receive the data model as below:

export interface TaskResponse {
  tasks: Task[];
}

And with .pipe(map) to return response.tasks as Observable<Task[]> .

import { map } from 'rxjs/operators';

getTasks(): Observable<Task[]> {
  return this.http
    .get<TaskResponse>(this.apiUrl)
    .pipe(map((response: TaskResponse) => response.tasks));
}

Sample Demo on StackBlitz

Answer 2

This error is just because you are trying to loop an object. Just take the data into a result like

this.getTasks().subscribe(result => {
  this.data = result.tasks;
})

After taking the response in data you can use the loop.