JSON merupakan sekumpulan objek JavaScript. Titik.
Pada dasarnya sebuah JSON hanyalah teks biasa yang tertulis dalam contoh tertentu, yang kemudian disimpan dengan ekstensi .json
, untuk kemudian bisa kita terjemahkan/konversi menjadi data yang terstruktur dan sanggup dilihat dalam bentuk-bentuk yang bisa dibaca oleh insan untuk keperluan interaksi (misalnya dalam bentuk tabel, daftar atau paragraf).
Data JSON berbasis teks, oleh alasannya ialah itu ia tidak bergantung pada bahasa pemprograman apapun, itulah yang menyebabkan 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 budi dan penerapannya.
Kali ini Saya hanya akan membicarakan ihwal penanganan JSON dengan JavaScript. Sebagai catatan, intinya format dan contoh 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, alasannya ialah JSON memang merupakan pembagian terstruktur mengenai dari dua tipe data tersebut. Sebuah JSON paling sederhana sanggup dinyatakan sebagai objek tunggal menyerupai ini:
var memberCard = { "nama": "Taufik Nurrohman", "memberId": 777, "address": "//nama_situs.com" };
Sebuah variabel memberCard
, secara umum hanya bisa menyimpan satu nilai/data saja. Namun dikala 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": "//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 membuat 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 memakai loop:
var memberCard = [ { "nama": "Taufik Nurrohman", "memberId": 777, "address": "//nama_situs.com" }, { "nama": "Agus Bolagus", "memberId": 778, "address": "//nama_situs_agus.com" }, { "nama": "Bejo Subejo", "memberId": 230, "address": "//the_bejo_site.com" }, { "nama": "Paimin Bin Paimun", "memberId": 411, "address": "//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 membuat cabang baru, kita bisa menyatakan nilai salah satu properti objek menjadi objek baru:
var memberCard = { "nama": "Taufik Nurrohman", "memberId": 777, "address": { "address1": "//nama_situs_pertamax.com", "address2": "//nama_situs_keduax.com", "address3": "//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 bab dari parameter sebuah fungsi:
var memberCard = { "nama": "Taufik Nurrohman", "memberId": 777, "address": "//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 menyerupai posting atau identitas anggota yang kompleks. Sebuah JSON eksternal disimpan dengan ekstensi .json
Contoh JSON yang paling gampang 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 isyarat sumber halaman blog Anda. Pada bab paling bawah, seharusnya Anda akan mendapati isyarat menyerupai ini. Ini ialah JSON, yang “sedang diterjemahkan” oleh sebuah fungsi berjulukan _WidgetManager._SetDataContext()
:
_WidgetManager._SetDataContext([{ 'name': 'blog', 'data': { 'blogId': '298900102869691923', 'bloggerUrl': 'http://www.blogger.com', 'title': '', 'pageType': 'item', 'url': ' ', 'canonicalUrl': ' ', 'canonicalHomepageUrl': 'http://dte-feed.blogspot.com/', 'homepageUrl': 'http://dte-feed.blogspot.com/', 'blogspotFaviconUrl': 'http://dte-feed.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': ': Konsep Auto Read-More Baru dengan Bantuan Textarea', 'metaDescription': 'Metode gres untuk mengurangi beban HTML posting yang biasa terjadi pada script auto read-more versi usang dengan memanfaatkan \46lt;textarea\46gt; untuk mencegah peramban memparse isyarat 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\42 - Atom\42 href\75\42http://dte-feed.blogspot.com/feeds/posts/default\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/rss+xml\42 title\75\42 - RSS\42 href\75\42http://dte-feed.blogspot.com/feeds/posts/default?alt\75rss\42 /\76\n\74link rel\75\42service.post\42 type\75\42application/atom+xml\42 title\75\42 - Atom\42 href\75\42http://www.blogger.com/feeds/298900102869691923/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\075298900102869691923\42 /\76\n\74link rel\75\42alternate\42 type\75\42application/atom+xml\42 title\75\42 - Atom\42 href\75\42http://dte-feed.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' } } }]);