NG02200: Cannot find a differ for object in ngFor '[object Object]'

Question

I'm currently trying to display a comment section on my angular webpage. I'm going this by using my python API. I can successfully console log the results, which are an array. However, when i use ngFor to display the results on my webpage I am returned with the error 'NG02200: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables, such as Arrays.'

This is my ts. file code:

export class CommentComponent {

    replies: any = [];
    comments: any = [];

    constructor(private webService: WebService,
        private route: ActivatedRoute,
        private formBuilder: FormBuilder, 
        public authService : AuthService) {}

       
    ngOnInit() {
        this.comments = this.webService.getComment(this.route.snapshot.params['id'],this.route.snapshot.params['_id'])

HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <div class="card bg-light mb-3"
                style = "width: 30rem; margin:auto"
                *ngFor = "let comment of comments | async">
                    <div class="card text-white bg-dark mb-3"
                        > 
                    <div class="card-header">
                        Review by {{ comment.username }}
                        
                    </div>
                    <div class="card-body">
                        {{ comment.comment }}

                        <hr>
                    </div>

            </div>
        </div>
    </div>
</div>

console logged results: {_id: '63f7ba0deca5ad33c3c18ed0', comment: 'Yeah, this park is dog friendly!', replies: Array(1), username: 'Beth'}

Your problem is that your "comments" variable should hold an array but webService.getComments() is returning a simple object. So find a way to either create an array out of the return value of getComments() or fix getComments() to actually return an array. — Mihai, Feb 28 '23 at 20:48
`ngFor` works with objects: https://stackoverflow.com/a/51491848/2050306 — robert, Feb 28 '23 at 21:01
ahh okay, do you have any idea how id go about doing that? my webservice looks like: getComment(postId: any, commentId: any) { return this.http.get( 'http://localhost:5000/api/v1.0/posts/' + postId + '/comments/' + commentId ); } — Beth McCoy, Feb 28 '23 at 21:18
Or should I update the .ts file? this.comments = this.webService.getComment(this.route.snapshot.params['id'],this.route.snapshot.params['_id']) — Beth McCoy, Feb 28 '23 at 21:20

score 0 · Accepted Answer · answered Feb 28 '23 at 21:21

Server response has only an object. Array in JSON looks like

[{_id: '63f7ba0deca5ad33c3c18ed0', comment: 'Yeah, this park is dog friendly!', replies: Array(1), username: 'Beth'}]

([] should be added)

Check your backend to fix your issue

And change initializing comments var, to get the error earlier

//comments: any = []; //components can be an array or anything else
  comments: any[] = [];

NG02200: Cannot find a differ for object in ngFor '[object Object]'

1 Answers1