Ionic Never loads api data

Question

I have set an ionic loading screen to run while the app is loading the data from an API endpoint I am using. The issue is that the ionic app never dismisses the loading screen and displays the data. When I check the url outside of the ionic call the json data is loaded already. I am unsure of why it is never being called in the application.

Below is the page that calls the data:

import { Component } from '@angular/core';

import { NavController, LoadingController } from 'ionic-angular';
import { RestService } from '../../providers/rest-service/rest-service';

@Component({
  selector: 'page-all-patients',
  templateUrl: 'all-patients.html',
  providers: [RestService]
})
export class AllPatientsPage {
  data: any;
  loading: any;

  constructor(public navCtrl: NavController, public restService: RestService, public loadingCtrl: LoadingController) {

    this.loading = this.loadingCtrl.create({
      content: 'Please wait while data is loading'
    });
    this.getdata();
  }

  getdata() {
    this.loading.present();
    this.restService.getJsonData().subscribe(
      result => {
        this.data=result.data.children;
        console.log("Success: " + this.data);
      },
      err => {
        console.error("Error : " + err);
      },
      () => {
        this.loading.dismiss();
        console.log('getData completed');
     }
   );
 }
}

Below is the RestServices.ts:

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

/*
  Generated class for the RestServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/

@Injectable()
export class RestService {

  constructor(public http: Http) {
    console.log('Hello RestServiceProvider Provider');
  }

  getJsonData() {
    // return Promise.resolve(this.data);

     return this.http.get('url_is_here').map(res => res.json());
   }

}

Does anyone know what may be causing this issue, if it is an issue of the calling the json data itself, or if it is an issue dismissing the loading screen? I am confused because the application runs without any error messages.

Sajeetharan Sajeetharan · Accepted Answer · 2017-11-26T17:44:30

Your getData should be something like this,

getdata() {
    this.loading.present();
    this.restService.getJsonData().subscribe(
    result => {
        this.data=result.data.children;
        console.log("Success: " + this.data);
        this.loading.dismiss();
    },
    err => {
        console.error("Error : " + err);
        this.loading.dismiss();
    } 
);

Ionic Never loads api data

1 Answers