Dalam artikel sebelumnya yang berjudul
Pengertian JSON sudah saya jelaskan perbedaan JSON Object dan JSON Array beserta cara menggunakan format JSON, dalam turorial kali ini saya akan menjelaskan cara menggunakan JSON di Javascript, perhatikan kode di bawah, kode JSON di bawah jika anda cetak akan menghasilkan
value dari
key nama
<!DOCTYPE html>
<html>
<head>
<title>BELAJAR JSON</title>
</head>
<body>
<script type="text/javascript">
var json = {'id':1, 'nama':'Mochamad Rohmat'};
document.write(json.nama);
// hasilnya adalah Mochamad Rohmat
</script>
</body>
</html>
jika script di atas di jalankan maka akan menghasilkan
Mochamad Rohmat Sekarang bedakan dengan contoh berikut ini, hasil 1 akan mencetak undefined karena formatnya adalah JSON Array bukan JSON Object sedangkan hasil 2 akan mencetak
Mochamad Rohmat karena posisi JSON Object ada di Array 0.
<!DOCTYPE html>
<html>
<head>
<title>BELAJAR JSON</title>
</head>
<body>
<script type="text/javascript">
var json = [{'id':1, 'nama':'Mochamad Rohmat'}];
document.write('Hasil 1 : '+ json.nama);
document.write('Hasil 2 : '+ json[0].nama);
// hasil 1 akan mencetak undefined
// hasil 2 akan mencetak Mochamad Rohmat
</script>
</body>
</html>
Sekarang bagaimana jika hasil dari JSON di loop dengan for, silahkan lihat kode berikut
<!DOCTYPE html>
<html>
<head>
<title>BELAJAR JSON</title>
</head>
<body>
<script type="text/javascript">
var json = [{'nama':'Mochamad Rohmat'},{'nama':'Heny Winangsih'},{'nama':'Maman Drajat'}];
for(var i = 0; i < Object.keys(json).length; i++){
document.write((i + 1) +'. '+ json[i].nama);
}
// akan menghasilkan
// 1. Mochamad Rohmat
// 2. Heny Winangsih
// 3. Maman Drajat
</script>
</body>
</html>
OK. sampai disini dlu tutorial kali ini, selamat mencoba dan semoga bisa bermanfaat.
ReplyDeleteInformasi yang sangat bermanfaat. Sangat membantu saya membuat daftar isi blog saya yang di Blogspot. Terima kasih banyak.
Kunjungi balik ya blog saya:
Nasi Box Jakarta
Nasi Box Jakarta
Nasi Box Jakarta
Nasi Box Jakarta