Undefined Data When Calling From JSON in Ionic 2

Question

I have a firebase URL to get some test data from as I'm still learning Ionic 2. Originally I had the error 'No HTTP Provider', but I fixed that by adding HttpModule to the app.module.ts file, but since that my data is always coming back as undefined.

The service is in it's own file (ww-api.service.ts):

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';

@Injectable()
export class WildWalkApi {

    private baseUrl = 'https://i2test-ea07c.firebaseio.com/';

    constructor(private http: Http) {}

    getLoginTest(){
        return new Promise(resolve => {
            this.http.get(this.baseUrl + 'login.json')
                .subscribe(res => resolve(res.json()));
        });
    }

}

Then this is exported using a shared file (shared.ts):

export * from './ww-api.service';

This then goes into app.componant.ts:

import { WildWalkApi } from './shared/shared';

@Component({
  templateUrl: 'app.html',
  providers: [
    WildWalkApi,
    HttpModule
  ]
})

And finally I try and use the data in my view:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { WildWalkApi } from "../../app/shared/shared";

@IonicPage()
@Component({
  selector: 'page-home-logged-in',
  templateUrl: 'home-logged-in.html',
})
export class HomeLoggedIn {

  private login;

  constructor(public navCtrl: NavController, public navParams: NavParams, private wwapi: WildWalkApi) {
  }

  ionViewDidLoad() {
    this.wwapi.getLoginTest().then(data => this.login = data);
    console.log('ionViewDidLoad HomeLoggedIn ' + this.login);
  }

}

However this.login is always coming back as undefined.

Answer 1

In your code You're trying to print the value right after sending the request but data is not available at that time .

You can use Event for it . Refer http://ionicframework.com/docs/api/util/Events/

sample is here

---

In that file from where you want to use that event is this.events.publish('user:loggedIn', data);

---

and that file where you want to show that data is

  this.events.subscribe('user:loggedIn', (data) => {
      console.log("page 1 data "+data);
      this.page1Message=data;
    });

This may work for you .