Featured Post

Cara Menggunakan JSON Di Javascript

Cara Menggunakan JSON Di Javascript
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.
DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain https://apaitu10.blogspot.com/. Terima kasih.
Postingan Lebih Baru Postingan Lebih Baru Postingan Lama Postingan Lama

Postingan lainnya

Komentar

Posting Komentar