Definisi :
JSON adalah singkatan dari JavaScript Object Notation, merupakan format pertukaran data yang ringan dan mudah dibaca atau ditulis manusia, juga mudah dibaca dan dibuat(digenerate) oleh komputer.
Pada kesempatan ini, saya akan menjelaskan tentang cara untuk menampilkan data JSON yang masih dalam bentuk object, menjadi data dalam bentuk tabel dalam dokumen html sehingga lebih mudah dibaca.
Kita akan memanfaatkan data json yang berasal dari data.go.id, data yang digunakan yaitu "Data Aspirasi dan Pengaduan Masyarakat".
[
{
"id": "456794",
"source_api": "all",
"tanggal": "2015-06-18",
"instansi_id": "126",
"belum": "19539",
"proses": "366",
"selesai": "464",
"parent_nid": "0",
"InstansiName": "Kementerian Sosial",
"rtl": "46.33"
},
{
"id": "456926",
"source_api": "all",
"tanggal": "2015-06-18",
"instansi_id": "858",
"belum": "427",
"proses": "480",
"selesai": "10579",
"parent_nid": "0",
"InstansiName": "Tim Sosialisasi Kebijakan Penyesuaian Subsidi BBM",
"rtl": "30.43"
},
{
"id": "456830",
"source_api": "all",
"tanggal": "2015-06-18",
"instansi_id": "416",
"belum": "2955",
"proses": "305",
"selesai": "2195",
"parent_nid": "0",
"InstansiName": "Kementerian Pendidikan dan Kebudayaan",
"rtl": "19.23"
}
]Langkah :
Buat folder baru, beri nama baca-json atau apapun terserah Anda. didalam folder tersebut, tambahkan file jquery.js, statistik.json, jscript,js, dan baca.html. Untuk sementara, biarkan file jscript.js kosong.Sementara itu, isi file statistik.json dengan data json di atas atau data yang berasal dari statistik, kemudian isi baca.html dengan kode berikut ini:
<html>
<head>
<script src="jquery.js"></script>
<script src="jscript.js"></script>
</head>
<body>
<textarea></textarea>
<table>
<tr>
<th rowspan="2">Nomor</th><th rowspan="2">Nama Instansi</th><th colspan="3">Laporan</th>
</tr>
<tr>
<th>Belum</th><th>Proses</th><th>Selesai</th>
</tr>
<tr>
<td>null1</td><td>null2</td><td>null3</td><td>null4</td><td>null5</td>
</tr>
</table>
</body>
</html>
berdasarkan kerangka dokumen di atas, sudah pasti bahwa data yang akan kita tampilkan dalam tabel adalah nama instansi dan jenis laporannya.
selanjutnya tambahkan ajax didalam dokumen jscript.js:
$.ajax({
url : "statistik.json",//lokasi dokumen yang berisi data json
type : "GET",
dataType : "json",//format dokumen
data : {get_param : 'value'},
success : function(data){
//merubah data json dari object menjadi string,
//dan tampilkan hasilnya melalui textarea
document.getElementsByTagName('textarea')[0].value = JSON.stringify(data);
}
});| Variabel | Keterangan |
|---|---|
| url | menentukan lokasi dokumen json yang akan digunakan |
| type | menentukan metode dalam mendapatkan data |
| dataType | menunjukkan format dokumen yang akan diambil |
| data | menentukan jenis data yang akan diambil |
| success | perintah yang akan dieksekusi jika telah berhasil mengambil data |
Sekarang, Anda telah berhasil dalam menampilkan data keseluruhan, namun masih dalam format json. Selanjutnya coba untuk mengeluarkan value dari variabel dengan index tertentu, misalkan instansi_id pada index ke 1. Lakukan perubahan pada dokumen jscript.js, dan tambahkan kode berikut ini:
//ganti
document.getElementsByTagName('textarea')[0].value = JSON.stringify(data);
//menjadi
document.getElementsByTagName('textarea')[0].value = data[1]['instansi_id'];
//data[1]... menunjukkan bahwa Anda mengambil data index ke 1
//data[..]['instansi_id'] menunjukkan bahwa Anda mengambil value dari variabel "instansi_id"Coba untuk menghitung jumlah data, gunakan kode ini:
document.getElementsByTagName('textarea')[0].value = data.length;$.ajax({
url : "statistik.json",
type : "GET",
dataType : "json",
data : {get_param : 'value'},
success : function(data){
//menghitung jumlah data
jmlData = data.length;
//variabel untuk menampung tabel yang akan digenerasikan
buatTabel = "";
//perulangan untuk menayangkan data dalam tabel
for(a = 0; a < jmlData; a++){
//mencetak baris baru
buatTabel += "<tr>"
//membuat penomoran
+ "<td>" + (a+1) + "</td>"
//mencetak nama instansi
+ "<td>" + data[a]["InstansiName"] + "</td>"
//mencetak jumlah laporan "belum"
+ "<td>" + data[a]["belum"] + "</td>"
//mencetak jumlah laporan "proses"
+ "<td>" + data[a]["proses"] + "</td>"
//mencetak jumlah laporan "selesai"
+ "<td>" + data[a]["selesai"] + "</td>"
//tutup baris baru
+ "<tr/>";
}
//menayangkan jumlah data
document.getElementsByTagName('textarea')[0].value = jmlData;
//mencetak tabel
document.getElementsByTagName("table")[0].innerHTML += buatTabel;
}
});
Sampai di sini, Anda telah berhasil untuk menayangkan keseluruhan data. Sekian tulisan tutorial dari saya, semoga bermanfaat.
bang mau tanya
ReplyDeletemau tanya apa bang?
DeleteThis comment has been removed by the author.
DeleteThis comment has been removed by the author.
ReplyDeletethanks ia
ReplyDeletekalo membuat list box dengan json di postingan blog bisa g bang?
ReplyDeletebang boleh tanya nda ????
ReplyDeletesaya habis parshing data json ,data json tersebut selalu berubah disetiap login ..lah gimana caranya kita membuat program php bertujuan mengambil data json tersebut yang selalu berubah" dan kita dapat menampilkan nya juga
minta bantuannya ya
saya tunggu ya bang ,,kalo ada info minta tolong email gpp
Deletekironbbc@gmail.com
bang mau tanya dong. pertanyaanya hampir mirip sama yg diatas. saya ada data json yg dinamic untuk ditampilkan dlm bentuk xls. gimana ya bang commandnya/codenya? saya pake react-native(javascript)
ReplyDeletemohon ilmunya bang salurkan. imam.saputravcr@gmail.com
ReplyDelete