Pada kesempatan kali ini saya akan menjelaskan cara menampilkan beberapa data dari beberapa file json. Perlu teman-teman ketahui sebelumnya json adalah singkatan dari JavaScript Object Notation yaitu sebuah format untuk berbagi data. Seperti yang kalian kenal, json diturunkan dari bahasa pemrograman javaScript akan tetapi format ini tersedia untuk bahasa pemrograman lainnya seperti Python, Ruby, PHP, dan Java. file dari json menggunakan ekstensi .json. Saat didefinisikan di dalam format file lain seperti .html dapat sertakan didalam tanda petik sebagai string, atau dapat dimasukkan kedalam suatu variabel sehingga format tersebut sangat mudah untuk ditransfer antar server web dengan klien atau browser sehingga json memberikan alternatif lebih baik dari pada XML dan membutuhkan formatting yang tidak banyak karena mudah dibaca dan ringan.
Namun pada penjelasan disini saya akan menampilkan hanya beberapa data dari beberapa file .json melalui ajax dan javascript, tentunya didalam kode javascript tersebut terdapat logika-logika untuk menghandle file .json yang akan ditampilkan per 3 data dari beberapa file .json secara bergantian.
Berikut Tahapannya :
- Teman-teman buat terlebih dahulu satu buah file dengan nama index.php
- Selanjutnya, ketikan kode seperti berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cara Menampilkan Beberapa Data Dari Beberapa File Json</title> </head> <body> <button id="tombol">Tampilkan data.</button> <ul id="tampil"></ul> <script> // ditulis disini let bram = document.getElementById("tombol") let i = 0; bram.onclick = function(event){ event.preventDefault() i += 1; if (i == 1) { latihan_tiga(i) } else if (i == 2) { latihan_tiga(i) } else if (i == 3) { bram.parentNode.removeChild(bram); latihan_tiga(i) } } function latihan_tiga(val) { let file; if(val == '1'){ file = 'file1.json'; }else if(val == '2'){ file = 'file2.json'; }else if(val == '3'){ file = 'file3.json'; } const animals = new XMLHttpRequest() animals.open ('GET', file, true) animals.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { let data = JSON.parse(this.responseText) let ul = document.getElementById('tampil') for(var i =0; i<data.length;i++) { let li=document.createElement('li') li.innerHTML= data[i].name ul.appendChild(li) } } } animals.send() } </script> </body> </html> |
- Jika sudah save file tersebut dan buatlah 3 buah file json yang sejajar dengan file index.php dan beri nama dengan ( file1.json, file2.json dan file3.json ).
Untuk pembahasan selanjutnya, akan saya jelaskan cara menampilkan beberapa data dari beberapa file json pada sesi berikutnya, semoga bermanfaat.