Beberapa hari yang lalu ketika saya sedang membuat sebuah game dengan JavaScript, saya menemukan kenyataan bahwa game yang menyimpan score pemain belum dapat tampil urut sesuai nilai skor terbanyak. Setelah mencari berbagai refernsi skrip dan utak-atik koding, akhirnya saya berhasil membuat rangking atau mengurutkan data JSON dengan urutan terbalik dari skor paling besar ke yang terkecil.
Mungkin saja anda juga memiliki masalah yang sama, sehingga saya ingin me-share kode yang berhasil menampilkan skore dalam ranking pada game saya tersebut.
Data sudah bisa tampil tetapi tidak sesuai ranking. Untuk membuat ranking tentu saja kita harus mengurutkan data dahulu. Bila tidak dengan demikian maka jadi susah ketika ingin membandingkan siapa pemain yang memiliki skor terbanyak. Belum lagi bila ingin membandingkan skor pemain baru apakah telah melampaui skor tertinggi dari pemain sebelumnya.
Untuk menyimpan skor saya menggunakan format JSON. Jadi ketika data skor ingin ditampilkan misalnya tiga terbaik atau maksudnya tiga pemain dengan skor tertinggi dari seluruh pemain, maka saya harus mengurutkan data kemudian mengambil tiga terbaik dari seluruh pemain tersebut. Setelah mencari-cari fungsi bawaan Javascript saya menemukan fungsi sort.
Sebenarnya fungsi sort pada Javascript akan efektif untuk diterapkan pada array yang berisi data string
Contoh 1:
var fruits = ["pisang", "rambutan", "apel", "mangga","jeruk"];
fruits.sort();
hasilnya:
["apel", "jeruk", "mangga", "pisang", "rambutan"]
Tetapi bila diterapkan pada data berupa angka, maka bisa salah hasilnya.
Contoh 2:
var points = [40, 100, 1, 5, 25, 10];
points.sort();
hasinya:
[1, 10, 100, 25, 40, 5]
Jadinya tidak benar bukan, Tapi jangan pergi dulu sebab ada solusinya.
Solusinya adalah dengan menambahkan fungsi perbandingan. Apa itu fungsi perbandingan?
Fungsi Perbandingan
Tujuan dari fungsi perbandingan adalah untuk menentukan urutan alternatif. Fungsi bandingkan harus mengembalikan nilai negatif, nol, atau positif, bergantung pada argumen:
fungsi (a, b) {return a - b}
Saat fungsi sort () membandingkan dua nilai, fungsi tersebut mengirimkan nilai ke fungsi bandingkan, dan mengurutkan nilai sesuai dengan nilai yang dikembalikan (negatif, nol, positif).
- Jika hasilnya negatif a disortir sebelum b.
- Jika hasilnya positif b disortir sebelum a.
- Jika hasilnya 0, tidak ada perubahan yang dilakukan dengan urutan kedua nilai tersebut.
Jadi penerapannya terhadap data array berupa angka diatas adalah seperti berikut:
Contoh 3:
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a - b});
hasilnya:
[1, 5, 10, 25, 40, 100]
Cara Membuat Ranking Data JSON
Oke sekarang saya mulai mengerti cara menggunakan sort. Tetapi masalah saya belum selesai, saya menggunakan data bertipe JSON. Kemudian karena saya ingin mencari tiga rangking terbaik maka data diurutkan dengan urutan terbalik dimana pemain dengan skor tertinggi diletakkan didepan kemudian pemain dengan skor lebih rendah dan seterusnya. Langsung saja begini hasilnya:
Contoh 4:
Data yang saya punya:
var highscore = [{"nama":"Fani","score":15},{"nama":"Hilmi","score":17},{"nama":"Faisal","score":10},{"nama":"Fina","score":14},{"nama":"Dodo","score":11}];
maka penerapan sortnya adalah dengan memodifikasi fungsi perbandingan menjadi seperti:
function perbandinganSkor(key, order = 'asc') {
return function innerSort(a, b) {
if (!a.hasOwnProperty(key) || !b.hasOwnProperty(key)) {
// property doesn't exist on either object
return 0;
}
const varA = (typeof a[key] === 'string')
? a[key].toUpperCase() : a[key];
const varB = (typeof b[key] === 'string')
? b[key].toUpperCase() : b[key];
let comparison = 0;
if (varA > varB) {
comparison = 1;
} else if (varA < varB) {
comparison = -1;
}
return (
(order === 'desc') ? (comparison * -1) : comparison
);
};
}
Kemudian untuk menggunakannya dengan perintah berikut:
highscore.sort(perbandinganSkor('score', 'desc'));
Penjelasan:
'score' adalah key object didalam JSON yang dibandingkan nilainya
'desc' adalah urutan dari besar ke kecil atau maksudnya descending
** Catatan : bila anda ingin menampilkan urutan JSON dari kecil terbesar anda tidak perlu menambahkan parameter desc pada fungsi perbandinganSkor()
Bila sudah didapatkan JSON dengan urutan terbalik (Besar ke kecil) maka anda bisa menampilkan dengan perulangan for atau while yang dibatasi hanya sampai jumlah rangking yang ingin ditampilkan. Hasilnya seperti pada gambar berikut:
Tidak ada komentar:
Posting Komentar