Data type error when fetching data from backend

Question

Angular is throwing the following error:

"Type 'Object' is missing the following properties from type 'never[]': length, pop, push, concat, and 28 more.

this.movies = data;"

// movie-list.component.ts

// ...

export class MovieListComponent implements OnInit {

  movies = [];

  constructor(
    private apiService: ApiService) { }

  ngOnInit() {
    this.apiService.getMovies().subscribe(
      data => {
        this.movies = data;
      })}
}

I´ve changed the "movie" variable for

movies: any[] = [];

but the error still appears

// api.service.ts

// ...
export class ApiService {

  baseUrl = 'http://127.0.0.1:8000/api/movies/'
  headers = new HttpHeaders({
    'Content-Type': 'application/json',
    Authorization: 'token 61a1e3bfcfaea4fceee08d52fa132c788204d5e4'
  })

  constructor(
    private http: HttpClient
  ) {}

    getMovies() {
      return this.http.get(this.baseUrl, {headers: this.headers});
    }
   
}

console.log(data)

(3) [{…}, {…}, {…}]
0: {id: 1, title: 'Titanic', description: 'Romantic movie '}
1: {id: 2, title: 'Avatar', description: 'SiFy movie'}
2: {id: 4, title: 'Dune', description: 'SiFy movie'}
length: 3
[[Prototype]]: Array(0)

OK, what would be helpful in this case is to see `getMovies()` implementation. — tromgy, Dec 08 '21 at 22:19
Did you edit the question? I don't see anything anything new. — tromgy, Dec 09 '21 at 00:01
It's still unclear what type `getMovies` returns (`get` doesn't have any type specification), but it seems likely that it returns an `Observable` of an _object_ of some sort, and you're expecting an array. Perhaps the array that you want is some property inside that object. Put a debug breakpoint at `this.movies = data;` or do `console.log`, and see what that `data` actually is. — tromgy, Dec 09 '21 at 12:45
I see that in other tutorials ther is "export class {}". Mine is missing that part — kubaSpolsky, Dec 09 '21 at 14:04

score 0 · Answer 1 · answered Dec 09 '21 at 14:20

0

My app was missing a movie.ts file:

export interface Movie {
    id?: any;
    title?: string;
    description?: string;
}

so I had to refactor the getMovie method in the following way:

    getMovies(): Observable<Movie[]>{
      return this.http.get<Movie[]>(this.baseUrl, {headers: this.headers});
    }

answered Dec 09 '21 at 14:20

kubaSpolsky

357
2
10

this looks good. – tromgy Dec 09 '21 at 17:26

Data type error when fetching data from backend

1 Answers1