Error: NG0900: Error trying to diff '[object Object]'. Only array and iterable are allowed

Question

Currently, I'm working on a MovieTicketBooking website using Angular and an asp.net web API. It got stuck at one point where I could not fix it. When I try to display movie details on the frontend, I get errors like this Error: NG0900: Error trying to diff '[object Object]'. Only arrays and iterables are allowed. Please help me to solve it

book.component.html

<div class="card">
    <div class="card-body" *ngFor="let item of moviedata">
      <h5 class="card-title">{{item.Title}}</h5>
      <p class="card-text">{{item.Description}}</p>
      <!-- <button class="btn btn-primary" (click)="getAllMovieById(item.id)">Book</button> -->
    </div>
</div>

book.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { Movie } from 'src/app/Models/Movie';
import { MovieService } from 'src/app/shared/movie.service';

@Component({
  selector: 'app-book',
  templateUrl: './book.component.html',
  styleUrls: ['./book.component.css']
})
export class BookComponent implements OnInit {
  moviedata: Movie[] = [];

  constructor(private route : ActivatedRoute , private formBuilder : FormBuilder, private _http:HttpClient, private router: Router, private movieservice : MovieService) { 

    this.movieservice.getMovieById(this.route.snapshot.params['id']).subscribe((result:any)=>{
      this.moviedata = result;
      console.log(this.moviedata);
    })
  }

  ngOnInit(): void 
  {
  }
}

Data on Console

autoOffSet: null
createdBy: 0
creationDate: "0001-01-01T00:00:00+00:00"
description: "qwerty"
entityState: 0
fare: 123
id: 1
imgPath: null
modifiedBy: null
modifiedDate: null
rowVersion: null
shows: Array(1)
0: {ticket: 12, showTime: '2022-05-23T13:09:00', showDate: '2022-05-23T00:00:00', movieId: 1, movie: {…}, …}
length: 1
[[Prototype]]: Array(0)
title: "Doctor Strange"
[[Prototype]]: Object

N.F. · Accepted Answer · 2022-05-24 02:41:49Z

2

Your moviedata is an object, not an array.

You should do like this.

<div class="card">
    <div class="card-body" >
      <h5 class="card-title">{{moviedata.title}}</h5>
      <p class="card-text">{{moviedata.description}}</p>
      <!-- <button class="btn btn-primary" (click)="getAllMovieById(item.id)">Book</button> -->
    </div>
</div>

answered May 24, 2022 at 2:41

N.F.

4,2025 gold badges29 silver badges63 bronze badges

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

Comments

Jago · Accepted Answer · 2022-10-06 15:45:43Z

1

this.moviedata = result;

result isn't an object; you should parse it to get an object:

this.moviedata = JSON.parse(result);

edited Oct 6, 2022 at 15:45

Jago

2,9645 gold badges31 silver badges43 bronze badges

answered Sep 29, 2022 at 14:25

Abdu Syahid

111 bronze badge

Comments

paranaaan · Accepted Answer · 2022-05-24 02:32:30Z

0

Maybe result wasn't type Movie[]. This might help to being your idea.

 constructor(private route : ActivatedRoute , private formBuilder : FormBuilder, private _http:HttpClient, private router: Router, private movieservice : MovieService) {
   this.movieservice.getMovieById(this.route.snapshot.params['id']).subscribe((result:any)=>{
     console.log('result', result);
     this.moviedata = result.shows;
     console.log(this.moviedata);
   })
 }

answered May 24, 2022 at 2:32

paranaaan

1,7552 gold badges13 silver badges21 bronze badges

Comments

Tayo Oyetunji · Accepted Answer · 2023-03-25 18:51:23Z

0

this is as a result of how the backend sent it API so you have to first get the object value then convert it to an array and pass the index of the data you want to pick. e.g 0 : true 1 : 200 2 : null 3 : (73) [{…}, {…}.......,{..}]

from the above the status is on index 0; the statuscode on 1,message on index 2 then the data on index 3 this.moviedata = Object.values(result)[3];

answered Mar 25, 2023 at 18:51

Tayo Oyetunji

1

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Error: NG0900: Error trying to diff '[object Object]'. Only array and iterable are allowed

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related