Ionic/angular framework

Ionic Framework
1

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…

2

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.

3

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’)

4

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

5

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