JSON (JavaScript Object Notation)

Tabel Konten
  1. Sekumpulan Objek 
  • Lebih Banyak Data 
    1. Sampel Pertama: Daftar Kartu Anggota 
    2. Sampel ke Dua: Cabang Baru 
  • Membuat Fungsi Untuk Memparse JSON 
  • JSON Dalam Dunia Nyata 
  • Referensi Lain: 
  • 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: 

    4 Komentar

    • Unknown

      ilmu saya masih kurang untuk memahami ini.. :(

    • Suwardi

      Akhirnya Mulai juga di Json..
      Hadew Susah Juga rupanya.....
      Bang taufik untuk Toggle dan Jsapi dimana..??

    • Unknown

      wah baru nyadar blogspot juga pake json...

    • Jerry Kong

      saya malah ingin menghilangkan kode itu caranya bagaimana ya? Kalau di template clasic saya coba tambahkan kode <!--</body>--> di atas tag </body>seperti ini bisa nanti jadinya seperti ini <!--<script type="text/javascript" src="//www.blogger.com/static/v1/common/js/1851061575-csitail.js"></script>
      <script type="text/javascript">BLOG_initCsi('classic_blogspot');</script></body>-->. Tapi kalau template baru kok tidak bisa ya. Caranya bagaimana kalau boleh tau Mas Taufik

    Komentar telah ditutup.