Selanjutnya kita akan membahas objek turunan yang kedua, yaitu Set. Set merupakan sebuah collection yang hanya dapat menyimpan nilai yang unik. Ini akan berguna ketika Anda menginginkan tidak ada data yang sama atau duplikasi dalam sebuah collection. Kita bisa mendeklarasikan sebuah Set dengan fungsi setOf.
val integerSet = setOf(1,2,4,2,1,5)
Perhatikan kode di atas. Di sana terdapat beberapa angka yang duplikat, yaitu angka 1 dan 2. Silakan tampilkan pada konsol dan lihat hasilnya.
println(integerSet)
// Output: [1, 2, 4, 5]
Secara otomatis fungsi setOf akan membuang angka yang sama, sehingga hasilnya adalah [1, 2, 4, 5]. Selain itu urutan pada Set bukanlah sesuatu yang penting, sehingga apabila kita bandingkan dua buah Set yang memiliki nilai yang sama dan urutan yang berbeda, akan tetap dianggap sama.
val setA = setOf(1,2,4,2,1,5)
val setB = setOf(1,2,4,5)
println(setA == setB)
// Output: true
Kita juga dapat melakukan pengecekan apakah sebuah nilai ada di dalam Set dengan menggunakan kata kunci in.
print(5in setA)
// Output: true
Kemudian ada juga fungsi union dan intersect untuk mengetahui gabungan dan irisan dari 2 (dua) buah Set. Sebagai contoh:
val setC = setOf(1,5,7)
val union= setA.union(setC)
val intersect = setA.intersect(setC)
println(union)
println(intersect)
// union: [1, 2, 4, 5, 7]
// intersect: [1, 5]
Informasi Tambahan:
Pada Set kita bisa menambah dan menghapus item namun tak bisa mengubah nilai seperti pada List.
//integerSet.add(6) // tidak bisa mengubah set immutable
mutableSet.add(6)// menambah item di akhir set
mutableSet.remove(1)//menghapus item yang memiliki nilai 1
Setelah berkenalan dan mempelajari data class, selanjutnya kita akan mencoba untuk mempelajari collection. Bayangkan ketika kita ingin menyimpan dan memanipulasi sebuah objek.
Kita perlu sebuah komponen yang mampu menambahkan, menghapus, mencari, bahkan mengurutkan sebuah data. Semua tugas itu bisa kita lakukan dengan bantuan collection.
Collections sendiri merupakan sebuah objek yang bisa menyimpan kumpulan objek lain termasuk data class.
Dengan collection kita bisa menyimpan banyak data sekaligus. Di dalam collections terdapat beberapa objek turunan, di antaranya adalah List, Set, dan Map. Mari kita pelajari satu per satu objek turunan tersebut.
List
Yang pertama adalah List. Dengan List kita dapat menyimpan banyak data menjadi satu objek.
Sebagai contoh, kita bisa membuat sebuah List yang berisi sekumpulan data angka, karakter atau yang lainnya. Yang menarik, sebuah List tidak hanya bisa menyimpan data dengan tipe yang sama.
Namun juga bisa berisi bermacam - macam tipe data seperti Int, String, Boolean atau yang lainnya. Cara penulisannya pun sangat mudah. Perhatikan saja beberapa contoh kode berikut.
val numberList :List<Int>= listOf(1,2,3,4,5)
Kode di atas adalah contoh dari satu objek List yang berisi kumpulan data dengan tipe Integer. Karena kompiler bisa mengetahui tipe data yang ada dalam sebuah objek List, maka tak perlu kita menuliskannya secara eksplisit. Ini tentunya akan menghemat kode yang kita ketikkan:
val numberList = listOf(1,2,3,4,5)
val charList = listOf('a','b','c')
Sedangkan untuk membuat List dengan tipe data yang berbeda, cukup masukkan saja data tersebut seperti kode berikut:
val anyList = listOf('a',"Kotlin",3,true)
Karena setiap objek pada Kotlin merupakan turunan dari kelas Any, maka variabel anyList tersebut akan memiliki tipe data List<Any>. Jika kita tampilkan list di atas maka konsol akan menampilkan: [a, Kotlin, 3, true]
Bahkan kita pun bisa memasukkan sebuah data class ke dalam List tersebut:
val anyList = listOf('a',"Kotlin",3,true,User())
Ketika bermain dengan sebuah List, tentunya ada saat di mana kita ingin mengakses posisi tertentu dari List tersebut. Untuk melakukannya, kita bisa menggunakan fungsi indexing seperti berikut:
println(anyList[3])
Perhatikan kode di atas. Fungsi indexing ditandai dengan tanda [ ]. Jika Anda mengira bahwa konsol akan menampilkan angka 3, maka tebakan Anda kurang tepat. Karena dalam sebuah List, indeks dimulai dari 0. Maka ketika kita akan mengakses data pada anyList yang berada pada indeks ke-3, artinya data tersebut merupakan data pada posisi ke-4. Jadi data yang akan ditampilkan pada konsol adalah true.
Lalu apa yang akan terjadi jika kita berusaha menampilkan item dari List yang berada di luar dari ukuran List tersebut? Sebagai contoh, Anda ingin mengakses indeks ke-5 dari anyList:
println(anyList[5])
Hasilnya adalah eror! Kompiler akan memberitahukan bahwa perintah itu tidak bisa dijalankan. Berikut pesan eror yang akan muncul:
Exception in thread "main" java.lang.ArrayIndexOutOfBoundsException: 5
Pesan di atas memberitahu kita bahwa List telah diakses dengan indeks ilegal. Ini akan terjadi jika indeks yang kita inginkan negatif atau lebih besar dari atau sama dengan ukuran List tersebut.
Informasi Tambahan:
Sejauh ini kita baru belajar menginisialisasikan atau mengakses data dari sebuah List. Pastinya Anda bertanya, apakah bisa kita memanipulasi data pada List tersebut? Jawabannya tidak. Apa pasal? List tersebut bersifat immutable alias tidak bisa diubah. Namun jangan khawatir. Kotlin standard library juga menyediakan collection dengan tipe mutable. Artinya kita melakukan perubahan pada nilainya dengan cara seperti menambah, menghapus, atau mengganti nilai yang sudah ada. Caranya pun cukup mudah. Anda hanya perlu menggunakan fungsi mutableListOf seperti berikut:
val anyList = mutableListOf('a',"Kotlin",3,true,User())
Dengan begitu, anyList sekarang merupakan sebuah List yang bersifat mutable dan kita bisa memanipulasi data di dalamnya.
anyList.add('d')// menambah item di akhir list
anyList.add(1,"love")// menambah item pada indeks ke-1
anyList[3]=false// mengubah nilai item pada indeks ke-3
anyList.removeAt(1)// menghapus item User() berdasarkan index atau posisi nilai di dalam Array
Sebelum menuliskan langsung pada proyek dengan fetch, biasakan ketika hendak mengkonsumsi API biasakan untuk mencobanya menggunakan aplikasi Postman terlebih dahulu.
Jika target url tersebut diakses melalui Postman dengan GET Request, maka akan menghasilkan response dengan struktur JSON yang tampak pada tab Body.
Pada response JSON yang dihasilkan menampung satu key dengan nama teams yang memiliki value berupa sebuah array.
Di dalam array tersebut menampilkan banyak data terkait klub olahraga yang memiliki nama Arsenal.
Kita dapat memanfaatkan key strTeam untuk mendapatkan nama klub, strTeamBadge untuk mendapatkan logo klub, dan strDescriptionEN untuk mendapatkan deskripsi singkat dalam bahasa inggris.
Lantas untuk mencari data team berdasarkan kata kunci lain kita dapat mengubah kata “Arsenal” menggunakan kata kunci yang kita inginkan, misalnya “Barcelona”.
Nah, Setelah memahami cara penggunaan API-nya, sekarang mari kita mulai tuliskan fungsi fetch pada proyek Club Finder. Langkah awal buka kembali proyek Club Finder pada text editor yang Anda gunakan.
Kemudian buka berkas data-source.js pada src -> script -> data -> data-source.js. Kita refactor fungsi searchClub dengan menghapus seluruh logika yang ada di dalamnya, kemudian tuliskan fungsi fetch seperti ini:
Seperti yang sudah kita ketahui, fungsi fetch() akan mengembalikan promise resolve jika request berhasil dilakukan. Maka untuk menangani respon dari request yang dibuat, kita gunakan .then() yang di dalamnya berisi variabel response sebagai response object yang didapat.
Karena method response.json() juga mengembalikan nilai promise, maka untuk mendapatkan nilai yang dibawa oleh resolve kita perlu menambahkan .then lainnya (chaining promise). Di dalam .then yang kedua ini, berikan parameter dengan nama responseJson (penamaan variabel tidaklah baku, namun gunakan penamaan yang menunjukkan arti dari nilai variabelnya).
responseJson merupakan nilai JSON yang dihasilkan dari perubahan object response dalam bentuk JSON melalui method .json() tadi.
Di dalam block .then yang kedua, kita kembalikan (return) dengan nilai promise resolve dengan membawa nilai jsonResponse.teams jika nilai array tidak null.
Namun jika teams bernilai null, maka kembalikan dengan nilai promise reject dengan membawa nilai “${keyword} is not found”.
Simpan perubahan tersebut dan jalankan aplikasi dalam mode development menggunakan perintah:
npm run start-dev
Setelah proyek terbuka, lakukan pencarian dengan keyword apapun yang Anda mau, di sini kita contohkan dengan “Barcelona”.
Yah, data yang ditampilkan undefined. Mengapa bisa demikian? Ini disebabkan karena kita belum menyesuaikan key berdasarkan response yang didapat dari public API. Kita harus menggunakan key strTeam untuk mendapatkan nama klub, strTeamBadge untuk mendapatkan logo klub, dan strDescriptionEN untuk mendapatkan deskripsi singkat dalam bahasa inggris.
Ketiga key tersebut kita tetapkan pada berkas src -> script -> component -> club-item.js. Lebih tepatnya pada fungsi render.
Kita ubah properti this._club.fanArt menjadi this._club.strTeamBadge, this._club.name menjadi this._club.strTeam, dan this._club.description menjadi this._club.strDescriptionEN.
Sehingga fungsi render akan menjadi seperti ini:
render(){
this.shadowDOM.innerHTML =`
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:host {
display: block;
margin-bottom: 18px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 10px;
overflow: hidden;
}
.fan-art-club {
width: 100%;
max-height: 300px;
object-fit: cover;
object-position: center;
}
.club-info {
padding: 24px;
}
.club-info > h2 {
font-weight: lighter;
}
.club-info > p {
margin-top: 10px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 10; /* number of lines to show */
Simpan kembali perubahan kode yang dituliskan kemudian lakukan pencarian kembali pada aplikasi Club Finder. Seharusnya sekarang aplikasi sudah bisa menampilkan data dengan baik.
Voila! Anda sudah berhasil menerapkan Fetch pada proyek Club Finder.
