API call issue with ionic2 - ionic2

Question

I'm Trying to call an API with ionic2, The data provider looks like this.the service returns an array of object.when i serve the app, the data is not displaying in the HTML template. How i can fix that issue.
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class VideoService {
videos: any;
constructor(public http: Http) {
console.log('Hello videoService Provider');
}
getVideos(){
this.http.get('http://mizikjams-lorisson.rhcloud.com/api/videos.json')
.map(res => res.json()).subscribe(data => {
this.videos= data.videos;
console.log(this.videos);
});
}
}
here's the html template code
<ion-content class=" mainpage card-background-page ">
<ion-list>
<ion-item *ngFor="let video of videos">
<ion-avatar item-left>
<img src="{{video.image}}">
</ion-avatar>
<h2>{{video.title}}</h2>
</ion-item>
</ion-list>
<div class="floatingbtn">
<ion-fab bottom right edge >
<button ion-fab color="orange" (click)="search();"><ion-icon name="search"></ion-icon></button>
</ion-fab>
</div>
</ion-content>

Answer 1

see working plunker - http://plnkr.co/edit/JtLm3K?p=preview
make sure you add the provider to the app.module
#NgModule({
imports: [ IonicModule.forRoot(AppComponent) ],
declarations: [ AppComponent, HomePage ],
entryComponents: [ HomePage ],
bootstrap: [ IonicApp ],
providers: [VideoService]
})
export class AppModule { }
provider
import { Injectable } from '#angular/core';
import { Http } from '#angular/http';
import 'rxjs/add/operator/map';
#Injectable()
export class VideoService {
videos: any;
constructor(public http: Http) {
console.log('Hello videoService Provider');
}
getVideos(){
return this.http.get('http://mizikjams-lorisson.rhcloud.com/api/videos.json')
.map(res => res.json());
}
}
page1.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { VideoService } from './videoService'
#Component({
selector: 'page-home',
templateUrl: 'app/home.page.html'
})
export class HomePage {
appName = 'Ionic App';
videos:any
constructor(public navController: NavController, public vs : VideoService) {
this.videos = this.vs.getVideos()
}
}
html
<ion-header>
<ion-navbar>
<ion-title>{{ appName }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let video of (videos | async)?.videos ">
<ion-avatar item-left>
<img src="{{video.image}}">
</ion-avatar>
<h2>{{video.title}}</h2>
</ion-item>
</ion-list>
</ion-content>