Http.get chokes on large list

Ionic Framework ionic-v3
1

I am very new to Angular/Ionic and have managed to hack together a get request to an api I created at https://www.soledadmemorial.com/api/v1/plaques. It was loading fast last night, but as soon as I started adding to template, it all of a sudden is slow and very unusable. I even removed reference to an image as well as load the json from a locally stored file. But, still very slow and not usable at all. Can someone please take a look and see if there is something obvious. Thank you.

home.ts

import { Component } from "@angular/core";
import { NavController, LoadingController } from "ionic-angular";
import { Http } from "@angular/http";
import { Data } from "../../providers/data/data";
import "rxjs/add/operator/debounceTime";

import {DetailPage} from "../detail/detail";

@Component({
  selector: "page-home",
  templateUrl: "home.html",
  providers: [Data]
})
export class HomePage {
  items: any;

  constructor(
    public navCtrl: NavController,
    public http: Http,
    public dataService: Data,
    public loadingCtrl: LoadingController
  ) {
    this.loadData();
  }

  loadData() {
    this.presentLoadingDefault();  
    this.dataService.load().then(data => {
      this.items = data;
    }); 
  }

  presentLoadingDefault() {
    let loading = this.loadingCtrl.create({
      content: 'Loading Plaques...'
    });
  
    loading.present();
  
    setTimeout(() => {
      loading.dismiss();
    }, 3000);
  }

  goToFeed(items) {
    this.navCtrl.push(DetailPage, {item: items});
  }
}

home.html

<ion-content class="list-mini-content">
    <ion-list class="list-mini">
        <button class="list-item" tappable ion-item (click)="goToFeed(item)" *ngFor="let item of items">
            <ion-row no-padding class="content-row one-line">
                <ion-col no-padding width-18 class="item-avatar">
                        <img src="" alt="">
                </ion-col>
                <ion-col no-padding width-72 class="item-content">
                    <h3 class="item-title">{{item.veteran_first}} {{item.veteran_last}}</h3>
                    <p class="item-description">{{item.veteran_branch}}</p>
                </ion-col>
                <ion-col no-padding width-10 class="item-icon">
                    <ion-icon name="arrow-forward"></ion-icon>
                </ion-col>
            </ion-row>
        </button>
    </ion-list>
</ion-content>

data.ts

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

@Injectable()
export class Data {
  items: any;

  constructor(public http: Http) {}

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

    // don't have the data yet
    return new Promise(resolve => {
      this.http
        .get("https://www.soledadmemorial.com/api/v1/plaques")
        .map(res => res.json())
        .subscribe(data => {
          this.items = data;
          resolve(this.items);
        });
    });
  }
}
2

Your load function performs the explicit-construction promise antipattern. Type your variables and use an Observable.

load(): Observable<ReturnType> {
   return this.http.get(pathtoyourapi);
}

and then use the async pipe in your template to display the data as it is emitted from the Observable.

3

I got rid of the new promise and added this

  load(): Observable<any> {
    return this.http.get('https://www.soledadmemorial.com/api/v1/plaques');
  }

Can you please give me an example where and how I should load my variables? I have literally been on this for a week and I feel I have tried everything wrong … little more of a push would be so appreciated :slight_smile: . Thank you.

4
5

Also, read this.
https://angular.io/guide/http