(Ionic 2) Getting data from php services is undefined

Question

I am new in ionic 2 and try to get my data from php services that i have created for ionic 1. It is works on ionic 1 but when i am getting data from ionic 2 it is undefined. It is works when i am getting data from php server on some website (from tutorial) but when getting my data from my local host it is undefined. It is the problem in my php code or i need to change my services. Thanks...

Here is my php code:

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

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


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


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


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


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

Here is my services:

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the PromoService provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@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 => {
      // We're using Angular Http provider to request the data,
      // then on the response it'll map the JSON data to a parsed JS object.
      // Next we process the data and resolve the promise with the new data.
      this.http.get('http://localhost:9999/KY Mobile/Promo/selectPromo.php')
        .map(res => res.json())
     .subscribe(data => {
        this.data = data.results;
        resolve(this.data);
      });
    });
  }
}

My home page:

import {Page} from 'ionic-angular';
import {PromoService} from '../../providers/promo-service/promo-service';

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

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

  loadPromo(){
  this.promoService.load()
  .then(data => {
    this.promos = data;
    console.log("ABCD" + data);
  });
  }
}

My html:

<ion-content padding class="page1">
<ion-list>
    <ion-item *ngFor="let promo of promos">
      <ion-avatar item-left>
        <img src="{{promo.image}}">
      </ion-avatar>
    </ion-item>
</ion-list>
</ion-content>

Update: Solved now, the code must be this.data = data in PromoService. Thanks..

what and where is undefined? can you debug the load() method to identify the point where it's failing? — Manu Valdés, Jun 03 '16 at 19:30
can you share the http get you do in ionic 1 that is working? — Manu Valdés, Jun 04 '16 at 08:27
You mean `res` in `this.http.get('http://localhost:9999/KY Mobile/Promo/selectPromo.php') .map(res => res.json())` is `undefined`? — Günter Zöchbauer, Jun 06 '16 at 06:37

John · Answer 1 · 2016-06-07T10:24:56.860

I have had some issues with Promises myself in Ionic2/Angular2. You could try to replace the Promise with an Observable instead in your service:

return Observable.create(observer => {
    this.http.get('http://localhost:9999/KY Mobile/Promo/selectPromo.php').map(res =>res.json()).subscribe(data=>{
        observer.next(data)
        observer.complete();
    });
 });

Then, in the home page.

loadPromo(){
  this.promoService.load().subscribe(data=>{
     this.promos = data;
     console.log("ABCD" + data);
  });
}

score 0 · Accepted Answer · edited May 23 '17 at 11:46

If res in

 this.http.get('http://localhost:9999/KY Mobile/Promo/selectPromo.php')
    .map(res => res.json())

is undefined then you don't get a value from http.get()

Other suggestions

You can use toPromise like

  return this.http.get('http://localhost:9999/KY Mobile/Promo/selectPromo.php')
  .map(res => res.json())
  .do(data => this.data = data.results);
  .toPromise();

or just return the promise returned from http.get() and subscribe on the call site

load() {
  if (this.data) {
    // already loaded data
    return Observable.of(this.data);
  }
  return this.http.get('http://localhost:9999/KY Mobile/Promo/selectPromo.php')
    .map(res => res.json())
    .do(data => this.data = data.results);
}

and then just use subscribe() instead of then()

loadPromo(){
  this.promoService.load()
  .subscribe(data => {
    this.promos = data;
    console.log("ABCD" + data);
  });
}

See also What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?

Hint map, do, toPromise, ... need to be imported to become available.

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/toPromise';

or just

import 'rxjs/Rx';

(Ionic 2) Getting data from php services is undefined

2 Answers2