JSON merupakan sekumpulan objek JavaScript. Titik.
Pada dasarnya sebuah JSON hanyalah teks biasa yang tertulis dalam pola tertentu, yang kemudian disimpan dengan ekstensi .json, untuk kemudian bisa kita terjemahkan/konversi menjadi data yang terstruktur dan dapat dilihat dalam bentuk-bentuk yang bisa dibaca oleh manusia untuk keperluan interaksi (misalnya dalam bentuk tabel, daftar atau paragraf).
Data JSON berbasis teks, oleh karena itu dia tidak bergantung pada bahasa pemprograman apapun, itulah yang menjadikan JSON ideal sebagai bahasa pertukaran data. Jika Anda melihat footer pada situs JSON, maka Anda akan mendapati begitu banyak tautan yang mengarah pada beberapa bahasa untuk menangani JSON selain dengan JavaScript. Dan semuanya tampak tidak terlalu berbeda dalam hal logika dan penerapannya.
Kali ini Saya hanya akan membicarakan tentang penanganan JSON dengan JavaScript. Sebagai catatan, pada dasarnya format dan pola teks di dalam JSON semuanya sama, hanya cara memparse/menerjemahkan datanya itu yang berbeda-beda.
Sekumpulan Objek
JSON tidak akan jauh-jauh dari array dan object, karena JSON memang merupakan penjabaran dari dua tipe data tersebut. Sebuah JSON paling sederhana dapat dinyatakan sebagai objek tunggal seperti ini:
var memberCard = {
"nama": "Taufik Nurrohman",
"memberId": 777,
"address": "http://nama_situs.com"
};
Sebuah variabel memberCard, secara umum hanya bisa menyimpan satu nilai/data saja. Namun ketika nilai variabel tersebut menjadi objek, maka kemampuan variabel tersebut akan meningkat dan bisa memuat data lebih banyak lagi dan lebih kompleks dibandingkan variabel biasa. Untuk menampilkan nilai objek satu per satu, Anda bisa membaca artikel mengenai JavaScript Array dan JavaScript Object:
var memberCard = {
"nama": "Taufik Nurrohman",
"memberId": 777,
"address": "http://nama_situs.com"
};
// Menampilkan data JSON sebagai kartu anggota (member card) virtual:
document.write('<div class="member-card">');
document.write('<ol>');
document.write('<li><strong>Nama:</strong> ' + memberCard.nama + '</li>');
document.write('<li><strong>ID Member:</strong> ' + memberCard.memberId + '</li>');
document.write('<li><strong>Alamat Situs:</strong> <a href="' + memberCard.address + '">' + memberCard.address + '</a></li>');
document.write('</ol>');
document.write('</div>');
Lebih Banyak Data
Untuk memasukkan data yang lebih banyak ke dalam JSON, Anda bisa mengelompokkan objek menjadi array. Untuk menciptakan cabang, Anda bisa mengubah nilai properti objek menjadi objek baru.
Sampel Pertama: Daftar Kartu Anggota
Untuk membuat kartu anggota yang berjumlah lebih dari satu, kita bisa menggabungkan beberapa objek kartu anggota menjadi array. Setelah itu, semua data bisa kita akses/panggil menggunakan loop:
var memberCard = [
{
"nama": "Taufik Nurrohman",
"memberId": 777,
"address": "http://nama_situs.com"
},
{
"nama": "Agus Bolagus",
"memberId": 778,
"address": "http://nama_situs_agus.com"
},
{
"nama": "Bejo Subejo",
"memberId": 230,
"address": "http://the_bejo_site.com"
},
{
"nama": "Paimin Bin Paimun",
"memberId": 411,
"address": "http://blog_paimin.com"
}
];
// Menampilkan data JSON sebagai deret kartu anggota (member card) virtual:
for (var i = 0; i < memberCard.length; i++) {
document.write('<div class="member-card">');
document.write('<ol>');
document.write('<li><strong>Nama:</strong> ' + memberCard[i].nama + '</li>');
document.write('<li><strong>ID Member:</strong> ' + memberCard[i].memberId + '</li>');
document.write('<li><strong>Alamat Situs:</strong> <a href="' + memberCard[i].address + '">' + memberCard[i].address + '</a></li>');
document.write('</ol>');
document.write('</div>');
}
Sampel ke Dua: Cabang Baru
Untuk menciptakan cabang baru, kita bisa menyatakan nilai salah satu properti objek menjadi objek baru:
var memberCard = {
"nama": "Taufik Nurrohman",
"memberId": 777,
"address": {
"address1": "http://nama_situs_pertamax.com",
"address2": "http://nama_situs_keduax.com",
"address3": "http://nama_situs_ketigax.com"
}
};
// Menampilkan data JSON sebagai kartu anggota (member card) virtual:
document.write('<div class="member-card">');
document.write('<ol>');
document.write('<li><strong>Nama:</strong> ' + memberCard.nama + '</li>');
document.write('<li><strong>ID Member:</strong> ' + memberCard.memberId + '</li>');
document.write('<li><strong>Alamat Situs:</strong>');
document.write('<div>1. <a href="' + memberCard.address.address1 + '">' + memberCard.address.address1 + '</a></div>');
document.write('<div>2. <a href="' + memberCard.address.address2 + '">' + memberCard.address.address2 + '</a></div>');
document.write('<div>3. <a href="' + memberCard.address.address3 + '">' + memberCard.address.address3 + '</a></div>');
document.write('</li>');
document.write('</ol>');
document.write('</div>');
Membuat Fungsi Untuk Memparse JSON
Jika JSON telah dinyatakan ke dalam variabel, maka kita bisa meletakkan variabel tersebut sebagai bagian dari parameter sebuah fungsi:
var memberCard = {
"nama": "Taufik Nurrohman",
"memberId": 777,
"address": "http://nama_situs.com"
};
function makeCard(json) {
document.write('<div class="member-card">');
document.write('<ol>');
document.write('<li><strong>Nama:</strong> ' + json.nama + '</li>');
document.write('<li><strong>ID Member:</strong> ' + json.memberId + '</li>');
document.write('<li><strong>Alamat Situs:</strong> <a href="' + json.address + '">' + json.address + '</a></li>');
document.write('</ol>');
document.write('</div>');
}
// Menampilkan data JSON sebagai kartu anggota (member card) virtual...
makeCard(memberCard);
JSON Dalam Dunia Nyata
Dalam dunia nyata, sebuah JSON tidak hanya terdiri dari data sependek itu. Beberapa bisa menampung konten yang lebih besar seperti posting atau identitas anggota yang kompleks. Sebuah JSON eksternal disimpan dengan ekstensi .json
Contoh JSON yang paling mudah kita lihat ada pada feed blog Blogger. Anda bisa melihatnya dengan cara mengakses URL feed blog yang diakhiri dengan parameter ?alt=json:
Contoh lain: Coba Anda lihat kode sumber halaman blog Anda. Pada bagian paling bawah, seharusnya Anda akan mendapati kode seperti ini. Ini adalah JSON, yang “sedang diterjemahkan” oleh sebuah fungsi bernama _WidgetManager._SetDataContext():
_WidgetManager._SetDataContext([{
'name': 'blog',
'data': {
'blogId': '8380174996736403350',
'bloggerUrl': 'http://www.blogger.com',
'title': 'DTE :]',
'pageType': 'item',
'url': 'http://hompimpaalaihumgambreng.blogspot.com/2013/01/konsep-auto-read-more-dengan-bantuan.html',
'canonicalUrl': 'http://hompimpaalaihumgambreng.blogspot.com/2013/01/konsep-auto-read-more-dengan-bantuan.html',
'canonicalHomepageUrl': 'http://hompimpaalaihumgambreng.blogspot.com/',
'homepageUrl': 'http://hompimpaalaihumgambreng.blogspot.com/',
'blogspotFaviconUrl': 'http://hompimpaalaihumgambreng.blogspot.com/favicon.ico',
'enabledCommentProfileImages': true,
'adultContent': false,
'disableAdSenseWidget': false,
'analyticsAccountNumber': 'UA-27593783-1',
'searchLabel': '',
'searchQuery': '',
'pageName': 'Konsep Auto Read-More Baru dengan Bantuan Textarea',
'pageTitle': 'DTE :]: Konsep Auto Read-More Baru dengan Bantuan Textarea',
'metaDescription': 'Metode baru untuk mengurangi beban HTML posting yang biasa terjadi pada script auto read-more versi lama dengan memanfaatkan \46lt;textarea\46gt; untuk mencegah peramban memparse kode HTML di dalam posting.',
'encoding': 'UTF-8',
'locale': 'in',
'localeLanguage': 'in',
'isPrivate': false,
'isMobile': false,
'isMobileRequest': false,
'mobileClass': '',
'isPrivateBlog': false,
'languageDirection': 'ltr',
'feedLinks': '\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42DTE :] - Atom\42 href\75\42http://hompimpaalaihumgambreng.blogspot.com/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\42DTE :] - RSS\42 href\75\42http://hompimpaalaihumgambreng.blogspot.com/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\42DTE :] - Atom\42 href\75\42http://www.blogger.com/feeds/8380174996736403350/posts/default\42 /\76\n\74link rel\75\42EditURI\42 type\75\42application/rsd+xml\42 title\75\42RSD\42 href\75\42http://www.blogger.com/rsd.g?blogID\0758380174996736403350\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42DTE :] - Atom\42 href\75\42http://hompimpaalaihumgambreng.blogspot.com/feeds/6023732528357300917/comments/default\42 /\76\n',
'meTag': '',
'openIdOpTag': '',
'googleProfileUrl': 'https://plus.google.com/108949996304093815163',
'postImageThumbnailUrl': 'http://2.bp.blogspot.com/-PLdSyiYy8Os/UOaEAHS8SQI/AAAAAAAAGHE/Q2521ahg5Jk/s72-c/auto-readmore-hack-for-blogger-with-textarea.png',
'imageSrcTag': '\74link rel\75\42image_src\42 href\75\42http://2.bp.blogspot.com/-PLdSyiYy8Os/UOaEAHS8SQI/AAAAAAAAGHE/Q2521ahg5Jk/s72-c/auto-readmore-hack-for-blogger-with-textarea.png\42 /\76\n',
'latencyHeadScript': '\74script type\75\42text/javascript\42\76(function() { var a\75window,b\75\42jstiming\42,d\75\42tick\42;var e\75function(c){this.t\75{};this.tick\75function(c,p,h){h\75void 0!\75h?h:(new Date).getTime();this.t[c]\75[h,p]};this[d](\42start\42,null,c)},f\75new e;a.jstiming\75{Timer:e,load:f};if(a.performance\46\46a.performance.timing){var g\75a.performance.timing,j\75a[b].load,k\75g.navigationStart,l\75g.responseStart;0\74k\46\46l\76\75k\46\46(j[d](\42_wtsrt\42,void 0,k),j[d](\42wtsrt_\42,\42_wtsrt\42,l),j[d](\42tbsd_\42,\42wtsrt_\42))}\ntry{var m\75null;a.chrome\46\46a.chrome.csi\46\46(m\75Math.floor(a.chrome.csi().pageT),j\46\0460\74k\46\46(j[d](\42_tbnd\42,void 0,a.chrome.csi().startE),j[d](\42tbnd_\42,\42_tbnd\42,k)));null\75\75m\46\46a.gtbExternal\46\46(m\75a.gtbExternal.pageT());null\75\75m\46\46a.external\46\46(m\75a.external.pageT,j\46\0460\74k\46\46(j[d](\42_tbnd\42,void 0,a.external.startE),j[d](\42tbnd_\42,\42_tbnd\42,k)));m\46\46(a[b].pt\75m)}catch(n){};a.tickAboveFold\75function(c){var i\0750;if(c.offsetParent){do i+\75c.offsetTop;while(c\75c.offsetParent)}c\75i;750\76\75c\46\46a[b].load[d](\42aft\42)};var q\75!1;function r(){q||(q\75!0,a[b].load[d](\42firstScrollTime\42))}a.addEventListener?a.addEventListener(\42scroll\42,r,!1):a.attachEvent(\42onscroll\42,r);\n })();\74/script\076',
'mobileHeadScript': '',
'adsenseClientId': 'pub-4884309229437815',
'view': '',
'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js',
'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/20497177ec370ede',
'plusOneApiSrc': 'https://apis.google.com/js/plusone.js'
}
}, {
'name': 'skin',
'data': {
'vars': {},
'override': ''
}
}, {
'name': 'view',
'data': {
'classic': {
'name': 'classic',
'url': '/?view\75classic'
},
'flipcard': {
'name': 'flipcard',
'url': '/?view\75flipcard'
},
'magazine': {
'name': 'magazine',
'url': '/?view\75magazine'
},
'mosaic': {
'name': 'mosaic',
'url': '/?view\75mosaic'
},
'sidebar': {
'name': 'sidebar',
'url': '/?view\75sidebar'
},
'snapshot': {
'name': 'snapshot',
'url': '/?view\75snapshot'
},
'timeslide': {
'name': 'timeslide',
'url': '/?view\75timeslide'
}
}
}]);
