Issues with creating ionic table populated by api data

@badesina82 wrote:

So i have an API and i want the response from the api to populate a table. However i’m not sure how to go about this. My ice.ts page:

import { Component } from ‘@angular/core’;

import { NavController, NavParams, LoadingController, AlertController, ToastController, Events } from ‘ionic-angular’;

import { Http, Headers } from ‘@angular/http’;

import ‘rxjs/Rx’;

import * as Constants from ‘…/…/app/constants’;

import { HttpClient } from ‘@angular/common/http’;

/**

• Generated class for the IcePage page.

• See https://ionicframework.com/docs/components/#navigation for more info on

• Ionic pages and navigation.

*/

export interface Config{

technologies:string;

}

@Component({

selector: ‘page-ice’,

templateUrl: ‘ice.html’,

})

export class IcePage {

public config: Config;

public columns:any;

public rows:any;

userId: any;

dataholder: any;

constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http, public loadingCtrl: LoadingController, public alertCtrl: AlertController, public toastCtrl: ToastController, public event: Events) {

this.columns=[

  

];

this.userId = 5243;//localStorage.getItem('id');

}

ionViewDidLoad() {

let headers = new Headers();

headers.append('Content-Type', 'application/json');

let contactObject = JSON.stringify({ "createdBy": this.userId });

let link = Constants.API_ENDPOINT + "ICE/FetchICEContacts"

this.http.post(link, contactObject, { headers: headers }).map(res => res.json())

  .subscribe(data => {

    this.dataholder = data;

  }, error => {

    // Silence

  });

}

doRefresh(refresher) {

let headers = new Headers();

headers.append('Content-Type', 'application/json');

let contactObject = JSON.stringify({ "createdBy": this.userId });

let link = Constants.API_ENDPOINT + "ICE/FetchICEContacts"

this.http.post(link, contactObject, { headers: headers }).map(res => res.json())

  .subscribe(data => {

    this.dataholder = data;

    refresher.complete();

  }, error => {

    //Silence

    refresher.complete();

  });

}

}

My Html page

<ion-navbar>

    <ion-title>ICE Contacts</ion-title>

</ion-navbar>

<!-- <ion-spinner style="margin-left: 45%;" *ngIf="!notificationStatus" name="bubbles"></ion-spinner> -->

<div *ngIf="dataholder != ''">

    <ion-refresher (ionRefresh)="doRefresh($event)">

        <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="Pull to refresh" refreshingSpinner="circles" refreshingText="Refreshing...">

        </ion-refresher-content>

    </ion-refresher>

    <ion-grid>

        <ion-row>

            

            <ion-col>

                <ion-list class="lst-no-background">

                    <ion-item *ngFor="let data of dataholder">

                       

                        <h2 text style="margin-top: -0.20rem;">{{ data.contactName }}</h2>

                        <p text-wrap><a ion-item no-padding href="tel:{{ data.telephone1 }}" target="_top">{{ data.telephone1 }}</a> </p>

                       

                    </ion-item>

                </ion-list>

            </ion-col> 

    </ion-row>

        

    </ion-grid>

    

</div>

<div class="content" *ngIf="dataholder == ''" style="margin-top: -20px;">

    <img class="imageerror" src="assets/imgs/noicecontacts.png" style="width: 110px !important; height: 110px !important;">

    <p text-center style="font-size: 8pt !important; font-weight: 300">You have no ICE Contacts. Your ICE Contacts will appear here when they are available</p>

</div>

Posts: 1

Participants: 1

Read full topic