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 jsonserver 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 webservice 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
        }
      ]
    }

CodePudding user response：

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.

CodePudding user response：

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