Cara menggunakan JSON_STRINGIFY pada JavaScript

Tutorial JavaScript Pemula Part 16 : Belajar JSON Pada Javascript

Tutorial JavaScript Pemula Part 16 :Belajar JSON Pada Javascript - Hello everyone selamat datang kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan Belajar JSON Pada Javascript.

Kenapa kita belajar JSON? Karena ini bakalan banyak kamu temui jika kamu sedang membuat sebuah website atau belajar mengenai API. Jadi sangat penting ini kita pelajari karena JSON ini akan berhubungan dengan sebuah data.

Lanjut baca ya biar jelas!

Belajar JSON Pada Javascript

JSON adalah singkatan dari JavaScript Object Notation, yaitu format data yang digunakan untuk keperluan penyimpanan dan pertukaran data. JSON juga teks biasa yang ditulis dalam notasi objek JavaScript, JSON digunakan untuk mengirim data antar komputer dan JSON tidak bergantung pada bahasa.

• Tutorial PHP Lanjutan Part 34 : Import Data Excel Ke MySQLi Dengan PHP Dan AJAX
• Tutorial PHP Lanjutan Part 35 : Menampilkan Data Dari Database Menggunakan AJAX

Dalam bidang web, JSON biasanya digunakan untuk mengambil data dari server atau mengirim data ke server. JSON lebih sering digunakan daripada XML sebagai pendahulunya, Secara fungsinya JSON sama dengan XML, tapi JSON lebih cepat dan lebih mudah dibaca.

Kenapa Harus Menggunakan JSON?

Format JSON secara sintaksis mirip dengan kode untuk membuat objek JavaScript. Karena itu, program JavaScript dapat dengan mudah mengubah data JSON menjadi objek JavaScript.

Karena formatnya hanya teks, data JSON dapat dengan mudah dikirim antar komputer, dan digunakan oleh bahasa pemrograman apa pun.

JavaScript memiliki fungsi bawaan untuk mengubah string JSON menjadi objek JavaScript: JSON.parse()

JavaScript juga memiliki fungsi bawaan untuk mengubah objek menjadi string JSON: JSON.stringify()

Pada dasarnya JSON itu terdiri dari KEY dan VALUE seperti contoh dibawah ini:

{ "key" : "value" }

Dalam JavaScript, Kamu  dapat menulis nilai string dengan tanda kutip ganda atau tunggal:

{ key : 'value' }

VALUE dalam JSON biasanya berupa tipe data seperti string, Boolean, Array, Object, NULL.

Contoh Penggunaan JSON Pada Javascript

Tadikan ada 2 fungsi bawaan dalam menangani data JSON yaitu JSON.parse() dan JSON.stringify(). Kita akan membuatkan contohnya satu persatu.

Contoh Penggunaan  Fungsi JSON.parse()

Dicontoh yang pertama kita akan mengubah string JSON menjadi objek JavaScript. Perhatikan lah code dibawah ini:

Hasilnya dapat kamu lihat pada Console dan kira-kira hasilnya akan seperti gambar dibawah:

Lalu kita coba dulu mengakses salah satu data dari data JSON yang kita buat. Perhatikan code dibawah:

Atau kamu bisa gunakan code dibawah ini untuk mengakses data JSON.

Hasilnya kira kira akan seperti dibawah gambar ini :

Berarti sampai sini kita dapat menyimpulkan bahwa untuk mengakses data dari JSON itu ada 2 cara, yang pertama seperti dibawah :

Variable.key

Atau bisa juga seperti ini

Variable["key"]

Lalu bagaimana caranya kita menganti atau mengubah data JSON? Cara cukup gampang kok, perhatikanlah code dibawah ini:

Hasilnya kira kira seperti gambar dibawah ini:

Contoh Penggunaan  Fungsi JSON.stringify()

Fungsi JSON.stringify() digunakan untuk mengubah objek javascript menjadi string JSON. Objek tersebut dapat berupa array maupun objek. Perhatikanlah code dibawah ini:

Hasilnya terdapat diconsole dan hasilnya kira-kira seperti pada gambar dibawah:

Menyimpan Data JSON ke Localstorage atau Sessionstorage

Pada materi sebelumnya kita sudah belajar mengenai StorageWeb Browser Pada Javascript, bagi yang belum baca silahkan dibaca dulu agar paham mengenai syntax nya nanti. Sekarang saya ingin bereksperimen untuk menyimpan data ke Localstorage saja ya dan kita juga akan menampilkannya pada console jika data sudah berhasil disimpan. Perhatikan code dibawah ini:

Data sudah berhasil disimpan kedalam localstorage bisa kamu lihat pada gambar dibawah:

Setelah itu kita menampilkannya ke console maka hasilnya pun seperti gambar dibawah:

Di JSON, objek tanggal tidak diperbolehkan. Fungsi JSON.stringify() akan mengonversi tanggal apa pun menjadi string. Untuk meyakinkan kamu, saya sudah buat contohnya. Perhatikan lah code dibawah:

Untuk hasilnya akan seperti gambar dibawah ini:

JSON VS XML

Seperti yang saya katakan diatas bahwa JSON lebih bagus daripada XML dan sekarang saya akan menerangkan kenapa JSON itu lebih baik daripada XML.

• Tutorial JavaScript Pemula Part 14 : Mengetahui Browser Object Mode Pada Javascript
• Tutorial JavaScript Pemula Part 15 : Mengenal Dan Memahami Web Storage

JSON dan XML dapat digunakan untuk menerima data dari server web. Dibawah ini ada beberapa contoh sebuah data JSON dan XML. Perhatikanlah code dibawah

Data JSON

{"employees":[
  { "Nama":"Ilham Budiawan Sitorus", "umur":"19" },
  { "Nama":"Bela Nabila Sitorus", "umur":"16" },
  { "Nama":"Khoirun Nisa", "umur":"19" }
]}

Data XML

  
    Ilham Budiawan Sitorus 19
  
  
    Bela Nabila Sitorus 16
  
  
    Khoirun Nisa 19
  

Alasan JSON Itu Seperti XML Karena

• JSON dan XML "mendeskripsikan diri sendiri" (dapat dibaca manusia)
• JSON dan XML bersifat hierarkis (nilai di dalam nilai)
• JSON dan XML dapat diuraikan dan digunakan oleh banyak bahasa pemrograman
• JSON dan XML dapat diambil dengan XMLHttpRequest

Alasan JSON Itu Tidak Seperti XML Karena

• JSON tidak menggunakan tag akhir
• JSON lebih pendek
• JSON lebih cepat untuk membaca dan menulis
• JSON dapat menggunakan array

Saya merekomendasikan JSON melalui XML saat melakukan Ajax. Mengapa? Karena mesin JavaScript dapat dengan mudah mengubah respons JSON itu menjadi objek JavaScript... memungkinkan Kamu mengakses/memanipulasi data itu dengan sangat mudah. Kamu hanya perlu menggunakan eval() atau JSON.parse() atau yang serupa (tergantung pada perpustakaan browser/javascript).

JSON adalah JavaScript yang valid; jadi secara keseluruhan itu jauh lebih baik dengan Ajax/Javascript/Web daripada XML.

JSON juga cenderung kurang bertele-tele, terutama dalam hal array dan pasangan key/value... sesuatu yang mungkin sering Anda temui dengan layanan web.

Daripada XML, orang cenderung membuat kosakata XML khusus mereka sendiri. Jadi, jika ada yang ingin menggunakan layanan Kamu, mereka juga harus mempelajari kosakata XML Kamu. JSON jauh lebih universal dalam hal ini.

Sekian materi kita mengenai JSON, next materi kita akan membahas mengenai AJAX agar kita bisa jauh lebih dekat ke tahap tingkat menengah dalam belajar Javascript.

Semoga Bermanfaat!

JSON Stringify untuk apa?

Apa itu JSON dan contohnya?

Apa kepanjangan dari JSON?