Tuesday, January 20, 2015

Tutorial Javascript Part 29: Apa Itu JSON?

JSON adalah singkatan dari JavaScript Object Notation. JSON adalah format pertukaran data pada website. Format JSON berbasis teks menggunakan bahasa javascript dengan struktur data yang mudah dipahami oleh manusia ataupun oleh komputer. Meskipun JSON ditulis dengan menggunakan bahasa javascript namun JSON merupakan data universal berbasis teks. Format JSON dapat digunakan oleh bahasa pemrograman selain javascript.

Berikut ini contoh data dalam format JSON :

{"siswa":[
    {"nama":"Sabrina", "alamat":"Jepara"}, 
    {"nama":"Ahmad", "alamat":"Kudus"},
    {"nama":"Budi", "alamat":"Demak"}
]}

Lahirnya JSON

JSON muncul untuk memenuhi kebutuhan akan sarana pertukaran data antar website. Seperti diketahui bahwa saat ini kita bisa mendapatkan data yang dishare oleh sebuah website misalnya untuk keperluan plugin sosial media seperti facebook atau twitter.

Sebetulnya selain JSON sudah ada format pertukaran data yang sudah dipakai lebih dulu yaitu XML yang merupakan singkatan dari eXtensible Markup Language. Namun XML ini ditulis menggunakan kode HTML bukan javascript. Struktur XML mirip dengan HTML namun dengan tag yang kita buat sendiri, seperti <nama>...</nama> atau <alamat>...</alamat>.

Format JSON diperkenalkan oleh Douglas Crockford pada tahun 2001. JSON saai ini telah dijelaskan pada standar terkemuka RFC 7159 dan ECMA-404. Format JSON juga telah dispesifikasikan pada standar RFC 4627 dengan tipe media internet resmi aplication/json dan ekstensi file-nya menggunakan .json (dot json).

Stuktur Penulisan JSON

Format penulisan JSON dibuat mirip dengan format data object pada javascript. Dengan demikian sangat mudah untuk mengolah data JSON menggunakan javascript. Didalam data teks JSON terdapat array yang didalamnya terdapat object yang berisi beberapa pasang nama dan nilai. Jadi bisa digambarkan secara garis besar JSON berisi data, object dan array.

Berikut ini beberapa aturan penulisan JSON :
  1. Data ditulis secara berpasangan nama dan nilai, contoh :
    "nama":"Sabrina"
    
  2. Masing-masing data dipisahkan dengan tanda koma, contoh :
    "nama":"Sabrina","alamat":"Jepara"
    
  3. Object ditaruh pada sepasang kurung kurawal, contoh :
    {"nama":"Sabrina","alamat":"Jepara"},
    {"nama":"Ahmad", "alamat":"Kudus"},
    {"nama":"Budi", "alamat":"Demak"}
    
  4. Array ditaruh pada sepasang kurung kotak, contoh :
    "siswa":[
        {"nama":"Sabrina", "alamat":"Jepara"}, 
        {"nama":"Ahmad", "alamat":"Kudus"},
        {"nama":"Budi", "alamat":"Demak"}
    ]
    

Penggunaan JSON

Fungsi utama dari penggunaan JSON adalah untuk pertukaran data antar web. Namun demikian kita bisa juga menggunakan JSON untuk menyimpan sebuah data pada server lalu mengambilnya pada komputer client dengan menggunakan javascript.

Untuk menggunakan JSON kita bisa langsung membaca dari data JSON atau mem-parsingnya kedalam object.

Contoh penggunan JSON secara langsung

Pada contoh berikut ini kita membuat variabel dataSiswa yang berisi data siswa dengan format JSON. Data yang kita simpan adalah data nama dan alamat. Masing-masing data tersebut kita simpan dalam satu array yang kita beri nama siswa.

Untuk menampilkan data kita menggunakan perintah alert saat tombol Enter ditekan.
 <!DOCTYPE html>    
 <html>    
 <head> </head>  
 <body>     
 <script type="text/javascript">    
 var dataSiswa = {  
     "siswa":[  
   {"nama":"Sabrina", "alamat":"Jepara"},  
   {"nama":"Ahmad", "alamat":"Kudus"},  
   {"nama":"Budi", "alamat":"Demak"}  
 ]};  
   
 function displaySiswa () {  
     alert(dataSiswa.siswa[0].nama + " dari " + dataSiswa.siswa[0].alamat);  
 }  
 </script>    
 Silahkan klik pada tombol    
 <button onclick="displaySiswa()">Enter</button>  
 <p id="view"></p>    
 </body>    
 </html>   

Contoh penggunan JSON dengan teks dan object parsing

Pada prakteknya cara ini paling banyak digunakan karena data yang diolah adalah data yang berisi teks dengan format JSON. Sumber data biasanya sengaja disediakan oleh sebuah website untuk berbagi informasi dengan pihak ketiga. Untuk mengolah data teks dengan format JSON sebelumnya harus di-parsing dengan fungsi JSON.parse().

Kita akan mengubah contoh diatas dengan mengganti data JSON menjadi variabel teks dan mengambil data dengan fungsi JSON.parse() berikut ini :
 <!DOCTYPE html>    
 <html>    
 <head> </head>  
 <body>     
 <script type="text/javascript">    
 var text = '{ ' +  
     '"siswa":[ ' +  
   '{"nama":"Sabrina", "alamat":"Jepara"}, ' +  
   '{"nama":"Ahmad", "alamat":"Kudus"}, ' +  
   '{"nama":"Budi", "alamat":"Demak"} ' +  
 ']}';  
   
 function displaySiswa () {  
    var dataSiswa = JSON.parse(text);  
    alert(dataSiswa.siswa[0].nama + " dari " + dataSiswa.siswa[0].alamat);  
 }  
 </script>    
 Silahkan klik pada tombol    
 <button onclick="displaySiswa()">Enter</button>  
 <p id="view"></p>    
 </body>    
 </html>   

Lihat indeks artikel Tutorial Javascript Dasar >>

Referensi :

2 komentar: