Error: Cannot find a differ supporting object '[object Object]'

Question

I am trying to create my first MEAN stack to do app and am stuck. Trying to figure out how to display my data in the html but not sure how to change the response I am getting from my server so my *ngFor can display the data.

I am sure my error is somewhere in the getList() or getAllTodos() functions. I've tried adding

.map(response => response.json().todos)

to the getAllTodos() function but then I get the "res.json is not a function" error due to the updates of Http module to HttpClient module of angular 4.

I tested my route from the server using REST client and I know I am getting the correct response, which is:

{
"success": true,
"todos":
  {
"_id": "5b0dc32d1f6fa0f48ca7d374",
"item": "test",
"completed": false,
"__v": 0
},
  {
"_id": "5b0dc3b11f6fa0f48ca7d375",
"item": "1234",
"completed": false,
"__v": 0
},
  {
"_id": "5b0dc4ae1f6fa0f48ca7d376",
..........

dashboard.component.ts

export class DashboardComponent implements OnInit {
  user: Object;

  lists: List[];

  @Input() input;

  @Output() update = new EventEmitter();

  constructor(
    private authService: AuthService,
    private flashMessage: FlashMessagesService,
    private listService: ListService
  ) { }

  ngOnInit() {
    this.getLists();

    this.authService.getProfile().subscribe(profile => {
      this.user = profile.user;
    },
    err => {
      console.log(err);
      return false;
    });
  }

  getLists(): void {
    this.listService.getAllTodos()
      .subscribe(list => this.lists = list);
  }

list.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';

import { List } from '../list';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class ListService {
  newTodo: any;

  constructor(private http: HttpClient) { }

  getAllTodos(): Observable<List[]> {
    return this.http.get<List[]>('http://localhost:3000/todos/lists')
  }

Possible duplicate of [Angular: Cannot find a differ supporting object '\[object Object\]'](https://stackoverflow.com/questions/35660306/angular-cannot-find-a-differ-supporting-object-object-object) — Amit Chigadani, May 31 '18 at 18:56

score 1 · Accepted Answer · answered May 31 '18 at 17:44

1

Your response is an object, You need to assign todos

 this.listService.getAllTodos()
      .subscribe(list => this.lists = list.todos);

answered May 31 '18 at 17:44

Sajeetharan

216,225
63
350
396

OMG yes thank you!! I was sooo close. I originally tried this.listService.getAllTodos() .subscribe(list.todos => this.lists = list.todos); – Cuong Vo May 31 '18 at 17:47
thanks i will, i have to wait 10 min before the site will let me :D – Cuong Vo May 31 '18 at 17:49
So I didn't realize it but I am getting a new error after trying the code you provided me. Property 'todos' does not exist on type 'Object'. I've tried to fix the problem by typecasting and creating a class model but no avail. Any ideas?? – Cuong Vo Jun 02 '18 at 04:34
i posted an answer in the new question you posted – Sajeetharan Jun 02 '18 at 04:35

score -1 · Answer 2 · answered May 31 '18 at 17:45

The response array is not a valid JSON value. todos should have been an array. The response should look something like this: { "success": true, "todos": [{ "_id": "5b0dc32d1f6fa0f48ca7d374", "item": "test", "completed": false, "__v": 0 }, { "_id": "5b0dc3b11f6fa0f48ca7d375", "item": "1234", "completed": false, "__v": 0 }]

Error: Cannot find a differ supporting object '[object Object]'

2 Answers2