Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

JSON (JavaScript Object Notation)

JSON

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 . 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": "//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": "//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": "//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 menciptakan 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 bagian 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 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': '298900102869691923',
    'bloggerUrl': 'http://www.blogger.com',
    'title': 'DTE :]',
    'pageType': 'item',
    'url': 'http://dte-feed.blogspot.com/2013/01/konsep-auto-read-more-dengan-bantuan.html',
    'canonicalUrl': 'http://dte-feed.blogspot.com/2013/01/konsep-auto-read-more-dengan-bantuan.html',
    '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': '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://dte-feed.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://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\42DTE :] - 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\42DTE :] - 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'
    }
  }
}]);

Referensi Lain:

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 4 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!