# \*ngFor not displaying data

**URL:** <https://forum.ionicframework.com/t/ngfor-not-displaying-data/95549>\
**Category:** ionic-v3\
**Created:** [June 22, 2017, 8:16pm UTC](https://forum.ionicframework.com/t/ngfor-not-displaying-data/95549 "2017-06-22T20:16:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![aboelhaithem](https://avatars.discourse-cdn.com/v4/letter/a/53a042/32.png) [@aboelhaithem](https://forum.ionicframework.com/u/aboelhaithem)\
**Post date:** [June 22, 2017, 8:16pm UTC](https://forum.ionicframework.com/t/ngfor-not-displaying-data/95549/1 "2017-06-22T20:16:11Z")

</div>

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

```auto
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

```auto
<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

```auto
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.

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [June 22, 2017, 9:13pm UTC](https://forum.ionicframework.com/t/ngfor-not-displaying-data/95549/2 "2017-06-22T21:13:17Z")

</div>

> [@aboelhaithem](#):
>
> console.log(this.movies\_cats);

What does this return?

---

<div class="post-metadata">

**Author:** ![aboelhaithem](https://avatars.discourse-cdn.com/v4/letter/a/53a042/32.png) [@aboelhaithem](https://forum.ionicframework.com/u/aboelhaithem)\
**Post date:** [June 22, 2017, 9:22pm UTC](https://forum.ionicframework.com/t/ngfor-not-displaying-data/95549/3 "2017-06-22T21:22:23Z")

</div>

3 Objects returns from JSON

```auto
"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/"
            }
        ]
    },

```

---

<div class="post-metadata">

**Author:** ![aboelhaithem](https://avatars.discourse-cdn.com/v4/letter/a/53a042/32.png) [@aboelhaithem](https://forum.ionicframework.com/u/aboelhaithem)\
**Post date:** [June 22, 2017, 11:34pm UTC](https://forum.ionicframework.com/t/ngfor-not-displaying-data/95549/4 "2017-06-22T23:34:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sujan12](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/sujan12/32/108395_2.png) [@Sujan12](https://forum.ionicframework.com/u/Sujan12)\
**Post date:** [June 23, 2017, 8:25am UTC](https://forum.ionicframework.com/t/ngfor-not-displaying-data/95549/5 "2017-06-23T08:25:55Z")

</div>

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.