Angular4 ngFor error - Cannot find a differ supporting object '[object Object]' of type 'object'

Question

I'm learning Angular 4. I am trying to display the results of a call to my backend API. I'm getting the data fine. I want to display it. Here is the component:

import { Component, OnInit } from '@angular/core'; 
import { QuizService } from '../services/quiz.service';

@Component({ 
    selector: 'board', 
    templateUrl: './board.component.html', 
    styleUrls: ['./board.component.css']
})

export class Board {
    constructor(private service: QuizService) {}

    quizzes: any[]; 

    ngOnInit() {
        this.service.getQuizzes()
            .subscribe(res => {
                this.quizes = res.json(); 
                console.log(this.quizzes)
            }), error => {
                console.error(error)
            }
    }
}

Here is where I am attempting to use ngFor:

<div className="board"> 
    <div className="board-container">
       <li *ngFor="let quiz of quizzes">
           {{ quiz.title }}
       </li>
    </div>
</div>

This raises this error:

"Board.html:3 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."

I'm following a tutorial and have done similar things before... can't figure out what I'm doing wrong here. The data IS coming through.

Can you show console.log(this.quizes) because I don't know structure — Nomura Nori
– Nomura Nori, Commented Mar 1, 2018 at 19:00
The problem was it needed to be: this.quizes = res.json().quizes The call doesn't return the array, it returns an object containing the array. Fixed it. — J Seabolt
– J Seabolt, Commented Mar 1, 2018 at 19:02

J Seabolt · Accepted Answer · 2018-03-01 19:03:59Z

1

The problem was it needed to be:

this.quizzes = res.json().quizzes

The call doesn't return the array, it returns an object containing the array. Adding the extra .quizzes gets you inside the array and makes the error go away.

answered Mar 1, 2018 at 19:03

J Seabolt

3,0087 gold badges32 silver badges61 bronze badges

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

Collectives™ on Stack Overflow

Angular4 ngFor error - Cannot find a differ supporting object '[object Object]' of type 'object'

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related