CODEWITHSUNDEEP
htmlangularionic-framework
Drew
Drew

Reputation: 1361

Ionic API data fetch blank screen

I have been attempting to write my own api's then populate my ionic app with the data. I tested the API's and was getting a CORS error when attempting to call the API. I have since added a proxy to the ionic.config.json file to get around this issue and call the API's. The ionic app no longer crashes, but it now just shows a blank page. Below is my code:

all-patients.ts:

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

import { NavController } 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 {
  public data: any;

  constructor(public navCtrl: NavController, public restService: RestService){
    this.loadPeople();
  }

  loadPeople(){
    this.restService.load()
    .then(data => {
      this.data = data;
    });
  }
}

rest-service.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');
  }

  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('/api')
      .map(res => res.json())
      .subscribe(data => {
         this.data = data.results;
         resolve(this.data);
       });
  });
}
}

all-patients.html:

<ion-navbar *navbar>
  <ion-title>
    All Patient Data
  </ion-title>
</ion-navbar>

<ion-content class="all-patients">
  <ion-list>
    <ion-item *ngFor="let item of data">
      <h2>{{item.firstName}} {{item.lastName}}</h2>
    </ion-item>
  </ion-list>
</ion-content>

I am not sure what is causing this issue, but my best guess is there is some sort of issue with the data call in the html, but even the ionic navigation bar from the html code isn't running so I am unsure.

Upvotes: 0

Views: 322

Answers (1)

Mehdi
Mehdi

Reputation: 2398

I can see few issues in your code :

1- In your template, you are referencing data but data is undefined at first. you need to protect your *ngFor with an *ngIf like so :

<ion-content class="all-patients">
  <ion-list *ngIf="data">
    <ion-item *ngFor="let item of data">
      <h2>{{item.firstName}} {{item.lastName}}</h2>
    </ion-item>
  </ion-list>
  <div *ngIf="!data" >Loading data...</div>
</ion-content>

2- In your Service, you are referencing this.data but you don't seem to have declared data in that class.

3- Add a console.log(data) within loadPeople() success to make sure you are receiving a result

4- Finally if you are still receiving a blank page, it's most likely because your CSS is making the page look blank. Inspect your html and see if the content is actually there but not visible due to a missing css class

Upvotes: 3

Related Questions