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

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

Can you post the getTaks() JSON output

Sajeetharan
– Sajeetharan

2021-12-29 13:02:16 +00:00
Commented Dec 29, 2021 at 13:02 — Sajeetharan
– Sajeetharan, Commented Dec 29, 2021 at 13:02

Yong Shun · Accepted Answer · 2021-12-30 02:58:12Z

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

answered Dec 30, 2021 at 2:58

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

djack109 Over a year ago

Thanks for that. It's working. I'm still new to Angular so I'll need to read up on this. Something this basic I would have thought to be covered pretty early on, thanks for your help.

djack109 Over a year ago

Oops sorry, yes accepted,thannk you, and filed away :)

camille · Accepted Answer · 2021-12-30 00:28:31Z

0

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.

edited Dec 30, 2021 at 0:28

camille

16.9k18 gold badges44 silver badges67 bronze badges

answered Dec 29, 2021 at 13:22

Dupendra Pawar

1

1 Comment

djack109 Over a year ago

Nope, that doesn't work. I get exactly the same error. My original code is almost exactly the same as yours this.taskService.getTasks().subscribe((tasks) => (this.tasks = tasks));

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related