CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic3
Umaiz Khan
Umaiz Khan

Reputation: 1227

ionic 3 show data from api to html

I need your help I fetch some data from api . I need to show data in app (in html) can some one please tell me how ill show in .html ? here is the code .In data there is 100 array with name field . I just want to show name in list like 100 name in list . Thanks

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HospitalPage } from '../hospital/hospital';
import { Observable } from 'rxjs/Observable';
import { HttpClient, HttpHeaders } from '@angular/common/http';



@Component({
  selector: 'page-home',
  templateUrl: 'home.html' 
})
export class HomePage {

data: Observable<any>;
galleryType = 'pintrest';
token: string;


  constructor(public navCtrl: NavController, public httpClient: 
  HttpClient) {

    this.token = "ee66cf61762eab785b006186dbc8c980";


  }

  getDataUsingToken(token) { 
     return this.httpClient.get('url.com', 
  {headers:new HttpHeaders({
              'token': token
             }
           )
         }
       ) 
     }

ngOnInit() { 
   this.getDataUsingToken(this.token).subscribe(data=>{ 
   this.data = data;
   console.log(data); 

   },

   err => console.log(err.message)
  );
 } 

}

enter image description here

Upvotes: 1

Views: 1347

Answers (3)

Umaiz Khan
Umaiz Khan

Reputation: 1227

.ts

 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { Observable } from 'rxjs/Observable';

 import { HttpClient, HttpHeaders } from '@angular/common/http';


@IonicPage()
@Component({
  selector: 'page-hospital',
  templateUrl: 'hospital.html',
})
export class HospitalPage {

data: Observable<any>;
  token: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient: HttpClient) {

      this.token = "ee66cf61762eab785b006186dbc8c980";


  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HospitalPage');
  }

getDataUsingToken(token) { 
         return this.httpClient.get('http://api.igiinsurance.com.pk:8888/insurance_takaful/insurance-api/get_panel_hospitals.php?offset=0&limit=100',{headers:new HttpHeaders({
                  'token': token
                 }
               )
             }
          ) 
      }


list;


ngOnInit() { 
    this.getDataUsingToken(this.token).subscribe(data=>{ 
      console.log(data); 
            this.list = data.records;

            console.log(data.records); 


    },

    err => console.log(err.message)
    );
  } 

}

.html

<ion-content>
  <ion-item >
    <p *ngFor="let item of list">{{item.name}}<p>
  </ion-item>
</ion-content>

Upvotes: 1

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

something like this can work for you

<ion-list>
        <ion-item *ngFor="let item of renderData">
            <ion-label>{{item.name}}</ion-label>
        </ion-item>
        <ion-item>
            <button ion-button color="primary" (click)="prev()"><<</button>
<button ion-button color="primary" (click)="next()">>></button>
  </ion-item>
</ion-list>

this will handle display the data by 10 item 

  getData( ) {
     this.renderData = this.data.slice(this.currentIndex,this.currentIndex+10)
  }

  next() {
    if ( (this.currentIndex +10) < this.data.length) {
      this.currentIndex +=10;
      this.getData();
    }
  }

  prev(){
  if ( (this.currentIndex -10) >=0) {
      this.currentIndex -=10;
      this.getData();
    }

  }

demo 🚀🚀

Upvotes: 1

Ira Watt
Ira Watt

Reputation: 2135

I cant acsess your API but if the data is structuerd like you say this should work 

<p *ngFor="let item of data.records">{{item.name}}<p>

Upvotes: 2

Related Questions