Ahmad Masykur

Share your knowledge although one function!

About the author

Ahmad Masykur is a Software Architecture Engineer at PT. Freeport Indonesia Jakarta Indonesia.
In this blog, I share things of interest to me. Most topics are likely to be related to software development, but don't hold me to it.

Certificates



Awards


Powered by

Prayer Time

July 30, 2010
الفجر/Dawn 04:43:13
الشروق/Sunrise 06:03:59
الظهر/Noon 11:59:21
العصر/Afternoon 15:21:26
المغرب/Sunset 17:54:42
العشاء/Dusk 19:07:02
Jakarta  Indonesia
Prayer time widget created by
Ahmad Masykur

Page List

Validators


Ahmad Masykur

JSON (JavaScript Object Notation)

JSON merupakan salah satu format pertukaran data anatara browser dengan server. JSON memiliki format yang lebih sederhana dan elegan dibandingkan dengan pendahulunya, XML.

Object

Sebuah object dideklarasikan dengan

var myObject = {};

Terlihat sangat sederhana, di dalam pasangan kurungkurawal dapat berisi berbagaimacam infomasi dari yang paling sederhana hingga kompleks. Javascript menyimpan semua informasi di dalam pasangan kurungkurawal yang dapat berisi semua bentuk tipe data primitive seperti string, angka (number), array, tanggal (date) dan regular expression.

Pembuatan sebuah Object

Cara lama untuk membuat sebuah object adalah dengan menggunakan kata-kunci new.

var myJSON = new Object();

Metode ini telah diperbaiki. Sekarang untuk membuat object kosong, dapat digunakan  dengan hanya mendefinisikan pasangan kurungkurawal.

var myJSON = {};

Object sebagai Data

Seperti halnya kebanyakan object dasar Javascript, format data sangatlah fleksibel yang ditulis sebagai pasangan nama dan nilai. Object memiliki nama yang terkandung dalam property object yang biasanya disebut sebagai nama object. Object juga memiliki property nilai. Lihat contoh berikut:

var myFirstJSON = { "firstName" : "Ahmad", "lastName" : "Masykur", "age" : 25 }; document.writeln(myFirstJSON.firstName); // Outputs Ahmad document.writeln(myFirstJSON.lastName); // Outputs Masykur document.writeln(myFirstJSON.age);

Object ini memiliki tiga property atau pasangan nama dan nilai. Nama adalah sebuah string (pada contoh di atas firstName, lastName dan age). Nilai dapat diisi dengan semua jenis object Javascript (semua di Javascript adalah object, nilai dapat diisi dengan string, angka, array, fungsi dan Object lainnya). Pada contoh di atas nilai diisi dengan Ahmad, Masykur dan 25. Ahmad dan Masykur adalah string dan 25 adalah angka. Seperti anda lihat pada contoh, nilai dapat diisi dengan berbagai macam object.

Format data ini disebut sebagai JSON (JavaScript Object Notation). Yang menjadikan JSON tangguh adalah kemampuan nilai diisi dengan semua jenis data. Nilai dapat diisi dengan array atau object yang bertingkat dengan kedalaman yang tak terhingga. Berikut adalah salah satu contoh struktur JSON yang kompleks.

var employees = { "accounting" : [ // accounting is an array in employyes { "firstName" : "Ahmad", // First element "lastName" : "Masykur", "age" : 25 }, { "firstName" : "Agung", // Second element "lastName" : "Riyadi", "age" : 29 } ], // End "accounting" array "sales" : [ // Sales is another array in employees. { "firstName" : "Vianton", // First element "lastName" : "Rahmat", "age" : 25 }, { "firstName" : "Kusuma", // Second element "lastName" : "Dewi", "age" : 25 } ] // End "sales" array } // End Employees

Pada contoh di atas employees adalah sebuah object dimana object tersebut memiliki dua property atau pasangan nama dan nilai. Di dalam employeesaccounting adalah sebuah array dengan dua object JSON yang mimiliki dua employees dengan object name dan age. Seperti halnya accounting, sales adalah array yang memiliki dua object JSON. Semua data ini berada di dalam object employees.

Pengaksesan Data pada JSON

Cara yang paling umum untuk mengakses data JSON adalah dengan menggunakan notasi titik. Caranya dengan menuliskan nama object diikuti dengan titik dan kemudian diikuti dengan nama/property.

var myObject = { 'color' : 'blue' }; document.writeln(myObject.color); // output blue

Jika object mengandung object lagi di dalamnya, tinggal tambahkan titik dan nama di belakangnya.

 

var myObject = { 'color' : 'blue', 'animal' : { 'cat' : 'friendly' } }; document.writeln(myObject.animal.cat); // output friendly

Dengan menggunakan contoh employees sebalumnya, jika ingin mengakses orang pertama yang bekerja sebagai sales adalah sebagai berikut.

document.writeln(employees.sales[0].firstName + ' ' + employees.sales[0].lastName);

Untuk mengakses orang kedua yang bekerja sebagai accunting adalah.

document.writeln(employees.accounting[1].firstName + ' ' + employees.accounting[1].lastName);

Pada contoh di atas, employees adalah object yang memiliki dua array, masing-masing array memiliki dua object. JSON bisa memiliki struktur sekompleks apapun. Struktur JSON hanya dibatasi oleh jumlah storage dan memori yang tersedia. Hal ini dikarenakan JSON dapat berisi object dalam object dalam object dan array di dalam array di dalam array dan seterusnya.

Mengakses JSON dengan Associative Array

JSON juga dapat diakses dengan cara seperti associative array.

var myFirstJSON = { "firstName" : "Ahmad", "lastName" : "Masykur", "age" : 25 }; document.writeln(myFirstJSON["firstName"]); // Outputs Ahmad document.writeln(myFirstJSON["lastName"]); // Outputs Masykur document.writeln(myFirstJSON["age"]); // Outputs 25

Demikian paparan singkat mengenai JSON. Pada artikel berikutnya Insya Allah akan saya jelaskan implementasi JSON dengan AJAX.


Categories: JSON
Permalink | Comments (5) | Post RSSRSS comment feed

Comments

Aryuanda Indonesia | Reply

Wednesday, November 21, 2007 5:17 AM

Aryuanda

Keren Nih... Tapi kurang buanyak penjelasannya.......

Maryati Nepal | Reply

Tuesday, August 26, 2008 1:23 AM

Maryati

may i request more code about JSON?
plz bro sent me a email

busby seo challenge United States | Reply

Tuesday, August 26, 2008 11:29 AM

busby seo challenge

same here too... http://pinayspeak.com | http://alaminos.net

busvy seo test Indonesia | Reply

Sunday, November 16, 2008 7:55 PM

busvy seo test

thats cool..its complete guide for the programer

jammer Romania | Reply

Friday, January 23, 2009 5:22 AM

jammer

great post
thanks

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading