Sorting data Array pada Ionic

Ketika membuat sebuah aplikasi yang sudah banyak bersinggungan dengan data Array, terkadang kita menemui beberapa kendala, dimana data yang diberikan kepada kita masih dalam bentuk data acak. Sedangkan keperluan dari user adalah data tampil sesuai dengan urutan nomor, atau sesuai dengan urutan alfabet nama nya. Hal ini cukup memberikan kita masalah jika yang kita lakukan adalah mengetik ulang data agar data bisa secara urut tampil dalam aplikasi kita.

Pada aplikasi Ionic karena kita menggunakan AngularJS, kita telah diberikan kemudahan untuk melakukan sorting data sebagaimana permasalahan diatas. Ada 2 cara sorting data yang diberikan oleh AngularJS. Sorting yang pertama adalah menggunakan metode sorting data pada file javascript kita. Cara kedua adalah kita melakukan sorting pada file html kita. Kedua cara ini sama saja mudahnya. Namun pada tutorial kali ini, saya akan membahas bagaimana melakukan sorting data Array melalui file html (cara kedua).

Untuk mempersingkat waktu, seperti biasa kita melakukan persiapan awal untuk membuat sebuah aplikasi dengan menggunakan Ionic.

ionic start sortListArray blank
cd sortListArray
ionic platform add android

Setelah persiapan dasar selesai, kita langsung mempersiapkan tampilan dasar dari aplikasi kita. Seperti biasa silahkan masukkan code berikut pada file index.html yang terletak pada directory www/index.html.

<!DOCTYPE html>
<html>

<head>
 <title></title>
 <link href="lib/ionic/css/ionic.css" rel="stylesheet"></link>
 <link href="css/style.css" rel="stylesheet"></link>

 <!-- ionic/angularjs js -->
 <script src="lib/ionic/js/ionic.bundle.js"></script>

 <!-- cordova script (this will be a 404 during development) -->
 <script src="cordova.js"></script>

 <!-- your app's js -->
 <script src="js/app.js"></script>
</head>

<body ng-app="starter">

 <ion-pane>
  <ion-header-bar class="bar-energized">
   <h1 class="title">Ionic Sorting Array Data</h1>
  </ion-header-bar>
  <ion-content ng-controller="starterCtrl">
   <div class="list">
    <div class="item row">
     <div class="col col-10">
      <strong>No</strong>
     </div>
     <div class="col">
      <strong>Nama Lengkap</strong>
     </div>
     <div class="col col-20">
      <strong>Tinggi</strong>
     </div>
    </div>
    <div class="item row" ng-repeat="a in dataName | orderBy: 'tinggi': true ">
     <div class="col col-10">
      {{a.no}}
     </div>
     <div class="col">
      {{a.nama}}
     </div>
     <div class="col col-20">
      {{a.tinggi}}
     </div>
    </div>
   </div>
  </ion-content>
 </ion-pane>
</body>

</html>

Kemudian, silahkan masukkan code dibawah ini pada file app.js yang terletak pada directory www/js/app.js

angular.module('starter', ['ionic'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
        // for form inputs)
        if (window.cordova & amp; & amp; window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.controller('starterCtrl', function($scope) {
    $scope.dataName = [{
        no: 1,
        nama: 'Prawito',
        tinggi: 171
    }, {
        no: 2,
        nama: 'Hudoro',
        tinggi: 169
    }, {
        no: 3,
        nama: 'Praw',
        tinggi: 167
    }, {
        no: 4,
        nama: 'Wito',
        tinggi: 165
    }, {
        no: 5,
        nama: 'Doro',
        tinggi: 163
    }, {
        no: 6,
        nama: 'Aa Ito',
        tinggi: 161
    }, {
        no: 7,
        nama: 'Ito',
        tinggi: 159
    }, {
        no: 8,
        nama: 'Ndoro',
        tinggi: 157
    }, {
        no: 9,
        nama: 'Prawitohudoro',
        tinggi: 155
    }, {
        no: 10,
        nama: 'Hudoroprawito',
        tinggi: 153
    }, ]
})

Hasil dari aplikasi kita ketika di jalankan adalah sebagai berikut:

Perlu diperhatikan disini adalah pada angularJS kita mengenal istilah binding data. Yang dimaksudkan adalah data yang saling terikat. Dimana ketika data dalam file Js kita dirubah maka tampilan pada html kita pun akan berubah, demikian juga sebaliknya. Itulah menariknya AngularJS. Proses binding ini juga ada 2 cara, dan cara yang palin sering digunakan adalah dengan cara {{dataBinding}}. Dengan cara kurung kurawal itu, dirasakan mempercepat proses penulisan code.

Pada html kita melihat bahwa kita menggunakan ng-repeat sebagai cara untuk melakukan pengulangan pengambilan data dari file JS kita. Secara manual mungkin bisa saja kita menuliskans setiap data kita pada file html. Tapi hal tersebut tentunya akan memakan waktu yang lama jika data yang kita miliki berupa file JS atau JSON.

Pada latihan kali ini data yang saya buat merupakan Array yang memiliki 10 object, object ini memiliki 3 properti yaitu no, nama dan tinggi.Yang menjadi materi pembelajaran kita kali ini adalah, kita dapat dengan mudah mensorting atau mengurutkan data berdasarkan 3 properti ini. Jika kita ingin mengurutkan data berdasarkan nomor dari kecil ke rendah, maka kita tinggal mengganti 'orderBy' pada html kita menjadi demikian.

ng - repeat = "a in dataName | orderBy: 'no' : false" //dari kecil ke besar
ng - repeat = "a in dataName | orderBy: 'no' : true" //dari besar ke kecil

Jika anda ingin mengurutkan berdasarkan nama, maka kita tinggal mengganti 'orderBy' pada html menjadi demikian:

ng - repeat = "a in dataName | orderBy: 'nama' : false" //dari A ke Z
ng - repeat = "a in dataName | orderBy: 'nama' : true" //dari Z ke A

Jika anda ingin mengurutkan berdasarkan tinggi badan, maka kita tinggal mengganti 'orderBy' pada html menjadi demikian:

ng - repeat = "a in dataName | orderBy: 'tinggi' : false" //dari kecil ke besar
ng - repeat = "a in dataName | orderBy: 'tinggi' : true" //dari besar ke kecil

Demikian semoga bermanfaat