Http.get chokes on large list

I am very new to Angular/Ionic and have managed to hack together a get request to an api I created at 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.


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";

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

    public navCtrl: NavController,
    public http: Http,
    public dataService: Data,
    public loadingCtrl: LoadingController
  ) {

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

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

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


<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 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 no-padding width-10 class="item-icon">
                    <ion-icon name="arrow-forward"></ion-icon>


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

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 => {
        .map(res => res.json())
        .subscribe(data => {
          this.items = data;

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.

I got rid of the new promise and added this

  load(): Observable<any> {
    return this.http.get('');

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.

Also, read this.