Ionic/angular framework

Please describe the question in detail and share your code, configuration, and other relevant info.

I work API as a beggiener i have and err of push;

ERROR TypeError: Cannot read properties of undefined (reading ‘push’)

here is my code ;

movies.page.html:

<ion-title>Top Trend Movies</ion-title>
<ion-item button *ngFor="let item of movies">

  <ion-label>{{item.title}}

 <p>{{item.release_date | date : 'y'}}</p>

</ion-label>

<ion-badge slot="end" > {{item.vote_average}}

</ion-badge>

    

</ion-item>

movies.page.ts

import { Component, OnInit } from ‘@angular/core’;

import { LoadingController } from ‘@ionic/angular’;

import { MovieService } from ‘src/app/services/movie.service’;

@Component({

selector: ‘app-movies’,

templateUrl: ‘./movies.page.html’,

styleUrls: [’./movies.page.scss’],

})

export class MoviesPage implements OnInit {

movies: any;

currentPage: 1;

constructor(

private movieService: MovieService,

private loadCtrl: LoadingController

) {}

ngOnInit() {

this.loadMovies();

}

async loadMovies() {

const loading = await this.loadCtrl.create({

  message: 'Loading..',

  spinner: 'bubbles',

});

await loading.present();

this.movieService.getTopRatedMovies(this.currentPage).subscribe((res) => {

  loading.dismiss();

  // this.movies = [this.movies, res.results];

  this.movies.push(res.results);

  console.log(res);

});

}

}

plz anyone help me this to overcome this problem…

The error couldn’t be clearer. Cannot read properties of undefined (reading ‘push’) means you are somewhere operating on an undefined object, trying to resolve a variable named push. This happens here:

// this.movies = [this.movies, res.results];

this.movies.push(res.results);

You commented out the first line, so when you reach the second one, movies is undefined and you can’t call push on it.

i commented out this in my ts file error has been removed. after that console shows another error that is probably in movies.page.html file.

Error is:

TypeError: Cannot read properties of undefined (reading ‘title’)

now here is my code:

movies.page.html:

<ion-title>Top Trend Movies</ion-title>
<ion-item button *ngFor="let item of movies">

  <ion-label>{{item.title}}

 <p>{{item.release_date | date : 'y'}}</p>

</ion-label>

<ion-badge slot="end" > {{item.vote_average}}

</ion-badge>

    

</ion-item>

in movies.page.ts:

import { Component, OnInit } from ‘@angular/core’;

import { LoadingController } from ‘@ionic/angular’;

import { MovieService } from ‘src/app/services/movie.service’;

@Component({

selector: ‘app-movies’,

templateUrl: ‘./movies.page.html’,

styleUrls: [’./movies.page.scss’],

})

export class MoviesPage implements OnInit {

movies: any;

currentPage: 1;

constructor(

private movieService: MovieService,

private loadCtrl: LoadingController

) {}

ngOnInit() {

this.loadMovies();

}

async loadMovies() {

const loading = await this.loadCtrl.create({

  message: 'Loading..',

  spinner: 'bubbles',

});

await loading.present();

this.movieService.getTopRatedMovies(this.currentPage).subscribe((res) => {

  loading.dismiss();

  this.movies = [this.movies, res.results];

  console.log(res);

});

}

}

in my html file :

<ion-item button *ngFor=“let item of movies”>

  <ion-label>{{item.title}}

 <p>{{item.release_date | date : 'y'}}</p>

</ion-label>

instead of showing my api title data ,
console does not read the properties of title and shows the err :

ERROR TypeError: Cannot read properties of undefined (reading ‘title’)

Bro same problem, but now in the html. Try logging out this.movies and see how it looks like. The way you are assigning it this.movies = [this.movies, res.results]; results in an array, containing an array i guess :thinking:

So better:

  1. declare movies in the top of your file:
public movies: any[] = [];
  • This set’s up an empty array
  • Even better would be to not use any and create a interface for your movie
  1. Assign it like:
this.movies = [...this.movies, ...res.results];

This does not place the whole array into a new array, the dots kinda like mean to use the items of the array directly

Thanks man, its works… again thank you very much…