Ionic 2 Retrieve Data from PHP

Home.html
========================================
<ion-content padding class="page1">
<ion-list>
    <ion-item *ngFor="let promo of promos">
   
   

        <p>{{promo.id}}{{promo.title}}</p>
   
    </ion-item>
</ion-list>
</ion-content>

Home.ts
==========================================
import {Page} from 'ionic-angular';
import {PromoService} from './promo-service';


@Page({
  templateUrl: 'build/pages/home/home.html',
  providers: [PromoService]
})
export class HomePage {

  public promos: any;
  constructor(public promoService : PromoService) {
    this.loadPromo();
  };

  loadPromo(){


  this.promoService.load()
  .then(data => {


    this.promos = data;


    console.log("ABCD" + data);
  });
  }
}


promo-service.ts
============================================
import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';


@Injectable()
export class PromoService {
  data: any = null;

  constructor(public http: Http) {}

            load() {
              if (this.data) {
                // already loaded data
                return Promise.resolve(this.data);
              }



              // don't have the data yet
              return new Promise(resolve => {
             
                this.http.get('http://localhost/api.php')
                  .map(res => res.json())
               .subscribe(data => {this.data = data;  resolve(this.data);});
              });


          }
}

app.ts
=============================================
import {Component} from '@angular/core';
import {Platform, ionicBootstrap} from 'ionic-angular';
import {StatusBar} from 'ionic-native';
import {HomePage} from './pages/home/home';


@Component({
  template: '<ion-nav [root]="rootPage"></ion-nav>'
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
    });
  }
}

ionicBootstrap(MyApp);



api.php
==========
<?php
header('Access-Control-Allow-Origin: *');

        $db_name  = 'myevents';
        $hostname = 'localhost';
        $username = 'root';
        $password = '';


        $dbh = new PDO("mysql:host=$hostname;dbname=$db_name", $username, $password);


        $sql = 'SELECT * FROM events';
        $stmt = $dbh->prepare($sql);
    // execute the query
        $stmt->execute();


        $result = $stmt->fetchAll( PDO::FETCH_ASSOC );


        $json = json_encode( $result );
        echo $json;  
?>

Vector and Icon shop