*ngFor not displaying data


#1

ngFor Not working in the HTML.I am using only one module in my application. I tried many solution but didn’t solve this problem. There isn’t any error in console. Here is my code

movie.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import { Storage } from '@ionic/storage';



@Component({
  selector: 'page-movie',
  templateUrl: 'movie.html',
})
export class Movie {
  http: any;
  movies_cats: any;

  constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage, http: Http) {
    this.http = http;
    return this.http.get('link.php?a=' + this.navParams.data.code + '&m=' + this.navParams.data.mac + '&s=' + this.navParams.data.serial + '&k=' + this.navParams.data.key + '&p=vodMovieList')
      .map(res => res.json())
      .subscribe(response => {
        this.movies_cats = response.vod_categories.vod_category;
        console.log(this.movies_cats);
      });
  }
}

movie.html

<ion-header>
  <ion-navbar>
    <ion-title>movie</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-grid class="grid_div">
    <ion-row class="grid_row">
      <ion-col col-3 class="grid_col">
        <ion-scroll scrollY class="scroll_bar">
          <div class="scroll-item" *ngFor="let cat of movies_cats">
            <p>name</p>
          </div>
        </ion-scroll>
      </ion-col>
      <ion-col col-9>SUB CATEGORIES</ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import {IonicStorageModule} from '@ionic/storage';

import { HttpModule} from '@angular/http';


import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { Categories } from '../pages/categories/categories';
import { Live } from '../pages/live/live';
import { Movie } from '../pages/movie/movie';


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    Categories,Movie,Live
  ],
  imports: [
    BrowserModule,HttpModule,
    IonicModule.forRoot(MyApp),IonicStorageModule.forRoot(),
  IonicStorageModule.forRoot({
      name: '__mydb',
         driverOrder: ['indexeddb', 'sqlite', 'websql']
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    Categories,Movie,Live
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},Storage
  ]
})
export class AppModule {}

The problem is that nothing appears in the HTML although the JSON reply contains 3 objects.


#2

What does this return?


#3

3 Objects returns from JSON

"vod_categories": {
        "vod_category": [
            {
                "id": "44",
                "caption": "VOD",
                "icon_url": "http://iptvcodes.com/gallery/Vod_categories/vod-banner.jpg"
            },
            {
                "id": "45",
                "caption": "3D MOVIES",
                "icon_url": "http://iptvcodes.com/gallery/Vod_categories/3D-logo2.jpg"
            },
            {
                "id": "46",
                "caption": "Prison Break Season 5",
                "icon_url": "http://iptvcodes.com/gallery/Vod_categories/"
            }
        ]
    },

#4

Can any one help me please. I’m stuck in this unknown problem.


#5

No, this is one object with a key vod_categories and value an array of objects. You have to iterate over this.movies_cats -> vod_categories -> vod_category.