Ionic 3 and JSON : trouble to add a name in a grid

Question

First : sorry for my English I'm not so good with this language.

I have a small problem. For my examination I have to create an application for management of cinemas. I am at the very beginning of this and I already have a problem.

I want the home page to show the list of the names of the cinemas which I have to register in the file called home.ts.

But after testing the page and restarting the program before making out a will again: my headers display but not the list of the name of cinemas.

I do not know why that does not work.

I put in here my current code so that you can understand my context better and what can be the problem.

home.html :

 <ion-header>
  <ion-navbar>
    <ion-title>
     Bienvenu sur myCiné
    </ion-title>
  </ion-navbar>
</ion-header>
  <ion-navbar color="primary">
    <button menuToggle ion-button icon-only>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>myCiné</ion-title>
  </ion-navbar>

  <ion-toolbar color="secondary">
    <ion-title>Mes cinémas favoris</ion-title>
  </ion-toolbar>

<ion-content padding>
  <ion-grid *ngIf="cinemas">
    <ion-row>
      <ion-col col-1 *ngFor="let cinema of cinemas">
        {{cinema.name}}
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

home.ts :

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  cinemas: [
    {
      id: 1,
      name: "Méga CGR La mézière",
      adress: "Zone de Millet",
      cp: "35320",
      ville: "La Mézière",
      nbSalles:"12",
      accesH:"oui",
      proj3D: "oui",
      stand: "oui",
      lesPlus:"Salle ICE"
    },
    {
      id: 2,
      name: "Pathé Atlantis",
      adress: "8 allée de la pérouse",
      cp: "44800",
      ville: "Saint Herblain",
      nbSalles:"12",
      accesH:"oui",
      proj3D: "oui",
      stand: "oui",
      lesPlus:"Salle IMAX"
    },
    {
      id: 3,
      name: "Gaumont Nantes",
      adress: "12 place du commerce",
      cp: "44000",
      ville: "Nantes",
      nbSalles:"14",
      accesH:"oui",
      proj3D: "oui",
      stand: "oui",
      lesPlus:"Salle IMAX"
    },
    {
      id: 4,
      name: "Méga CGR La Rochelle",
      adress: "Avenue Heri Becqurel",
      cp: "17000",
      ville: "La Rochelle",
      nbSalles:"13",
      accesH:"oui",
      proj3D: "oui",
      stand: "oui",
      lesPlus:"Salle ICE"
    }
  ]

  constructor(public navCtrl: NavController) {

  }
}

Thank for your answers and have a nice day.

Answer 1

You need to fix assignment for "cinemas" in your code:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  // here use assignment rather than comma:
  cinemas = [
    {
      id: 1,
      name: "Méga CGR La mézière",
      adress: "Zone de Millet",
      cp: "35320",
      ville: "La Mézière",
      nbSalles:"12",
      accesH:"oui",
      proj3D: "oui",
      stand: "oui",
      lesPlus:"Salle ICE"
    },
    {
      id: 2,
      name: "Pathé Atlantis",
      adress: "8 allée de la pérouse",
      cp: "44800",
      ville: "Saint Herblain",
      nbSalles:"12",
      accesH:"oui",
      proj3D: "oui",
      stand: "oui",
      lesPlus:"Salle IMAX"
    },
    {
      id: 3,
      name: "Gaumont Nantes",
      adress: "12 place du commerce",
      cp: "44000",
      ville: "Nantes",
      nbSalles:"14",
      accesH:"oui",
      proj3D: "oui",
      stand: "oui",
      lesPlus:"Salle IMAX"
    },
    {
      id: 4,
      name: "Méga CGR La Rochelle",
      adress: "Avenue Heri Becqurel",
      cp: "17000",
      ville: "La Rochelle",
      nbSalles:"13",
      accesH:"oui",
      proj3D: "oui",
      stand: "oui",
      lesPlus:"Salle ICE"
    }
  ]

  constructor(public navCtrl: NavController) {

  }
}

Also to make it even better you can declare you variables with type before constructor and then do assignments in constructor. This is a more standard approach:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

interface Cinema {
    id: number,
    name: string,
    adress: string,
    cp: string,
    ville: string,
    nbSalles: string,
    accesH: string,
    proj3D: string,
    stand: string,
    lesPlus: string
}

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {
    // here we can declare var and its type:
    cinemas: Array<Cinema>;

    constructor(public navCtrl: NavController) {
        // here we can do assignments:
        this.cinemas = [
            {
                id: 1,
                name: "Méga CGR La mézière",
                adress: "Zone de Millet",
                cp: "35320",
                ville: "La Mézière",
                nbSalles: "12",
                accesH: "oui",
                proj3D: "oui",
                stand: "oui",
                lesPlus: "Salle ICE"
            },
            {
                id: 2,
                name: "Pathé Atlantis",
                adress: "8 allée de la pérouse",
                cp: "44800",
                ville: "Saint Herblain",
                nbSalles: "12",
                accesH: "oui",
                proj3D: "oui",
                stand: "oui",
                lesPlus: "Salle IMAX"
            },
            {
                id: 3,
                name: "Gaumont Nantes",
                adress: "12 place du commerce",
                cp: "44000",
                ville: "Nantes",
                nbSalles: "14",
                accesH: "oui",
                proj3D: "oui",
                stand: "oui",
                lesPlus: "Salle IMAX"
            },
            {
                id: 4,
                name: "Méga CGR La Rochelle",
                adress: "Avenue Heri Becqurel",
                cp: "17000",
                ville: "La Rochelle",
                nbSalles: "13",
                accesH: "oui",
                proj3D: "oui",
                stand: "oui",
                lesPlus: "Salle ICE"
            }
        ]
    }
}