Menampilkan Data Array di Ionic

Mari Belajar Coding    7/18/2019    ionic   

Selamat datang di blog Mari belajar coding. Pada tutorial kali ini kita akan belajar bagaimana menampilkan data array di framework Ionic. Disini saya menggunakan Ionic 3, teman-teman yang menggunakan versi Ionic 4 bisa menyesuaikannya. 

Menampilkan Data Array di Ionic

Pertama-tama kita buat sebuah variabel untuk menampung data array dan array data di .ts. Teman-teman bisa melihat baris yang di beri highlight di bawah ini.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
@IonicPage()
@Component({
  selector: 'page-data',
  templateUrl: 'data.html',
})
export class DataPage {

  data:any;
  
  constructor(public navCtrl: NavController, public navParams: NavParams) {
   
    this.data=[
      {  
         "nim":"1234",
         "nama":"Agung Saputra",
         "alamat":"Semarang",
         "jurusan":"Teknik Informatika"
      },
      {  
         "nim":"1236",
         "nama":"Mirani Rahmawati",
         "alamat":"Pemalang",
         "jurusan":"Sistem Informasi"
      } 
   ]

  }
}

Tampilan data array di console log seperti dibawah ini.

Selanjutnya buka file .html, kita akan membuat sebuah list data mahasiswa dari array data. Lihat bari yang di beri highlight dibawah ini. Untuk binding data, kita bisa menggunakan fungsi *ngFor. 

<ion-header>
    <ion-navbar color="primary">
        <ion-title>
          Mari Belajar Coding
        </ion-title>
      </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>
        <button ion-item *ngFor="let item of data" >
          {{ item.nama }}
        </button>  
      </ion-list>
</ion-content>

Tampilan jika kita menjalankan program.

Kita juga bisa menampilkan data dalam bentuk tabel maupun card Ionic. Contoh jika kita akan menampilkan data di dalam tabel.

<ion-header>
    <ion-navbar color="primary">
        <ion-title>
          Mari Belajar Coding
        </ion-title>
      </ion-navbar>
</ion-header>

<ion-content padding>
  <table >
    <thead>
      <tr>
        <th>NIM</th>
        <th>Nama</th>
        <th>alamat</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of data">
        <td>{{ item.nim }}</td>
        <td>{{ item.nama }}</td>
        <td>{{ item.alamat }}</td>
      </tr>
    </tbody>
  </table>
</ion-content>

Buat style untuk mengubah tampilan tabel di .scss.

table { 
  width: 100%; 
  border-collapse: collapse; 
  font-size: 10pt;
 }
 tr:nth-of-type(odd) { 
  background: #eee; 
 }
 th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
 }
 td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
 }

Tampilan program jika dijalankan.

Contoh tampilan data dalam bentuk ion card.

<ion-header>
    <ion-navbar color="primary">
        <ion-title>
          Mari Belajar Coding
        </ion-title>
      </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-card *ngFor="let item of data">
        <ion-card-content>
            {{ item.nama }}
        </ion-card-content>
      </ion-card>
</ion-content>

Tutorial menampilkan data array di framework ionic sampai disini. Sekian, semoga bermanfaat.

Related Search:
Menampilkan data ionic
binding data ionic
ngfor ionic