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.
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar Javascript</title>
</head>
<body>
<script>
var data_json = '{"nama" : "Ilham Budiawan Sitorus", "pekerjaan" : "Freelance", "usia" : 19 }';
data = JSON.parse(data_json);
console.log(data);
</script>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar Javascript</title>
</head>
<body>
<script>
var data_json = '{"nama" : "Ilham Budiawan Sitorus", "pekerjaan" : "Freelance", "usia" : 19 }';
data = JSON.parse(data_json);
console.log(data.nama);
</script>
</body>
</html>
Atau kamu bisa gunakan code dibawah ini untuk mengakses data JSON.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar Javascript</title>
</head>
<body>
<script>
var data_json = '{"nama" : "Ilham Budiawan Sitorus", "pekerjaan" : "Freelance", "usia" : 19 }';
data = JSON.parse(data_json);
console.log(data["nama"]);
</script>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar Javascript</title>
</head>
<body>
<script>
var data_json = '{"nama" : "Ilham Budiawan Sitorus", "pekerjaan" : "Freelance", "usia" : 19 }';
data = JSON.parse(data_json);
console.log(data["nama"] = "Bela Nabila Sitorus");
</script>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar Javascript</title>
</head>
<body>
<script>
const data_json = {nama: "Ilham Budiawan Sitorus", pekerjaan: "Freelance", usia: 19 };
data = JSON.stringify(data_json);
console.log(data);
</script>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar Javascript</title>
</head>
<body>
<script>
const data_json = {nama: "Ilham Budiawan Sitorus", pekerjaan: "Freelance", usia: 19 };
const data = JSON.stringify(data_json);
localStorage.setItem("uji_coba", data);
let data_storage = localStorage.getItem("uji_coba");
let output = JSON.parse(data_storage);
console.log(output);
</script>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Belajar Javascript</title>
</head>
<body>
<script>
const data_json = {tanggal: new Date()};
data = JSON.stringify(data_json);
console.log(data);
</script>
</body>
</html>
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.
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
<employees>
<employee>
<Nama>Ilham Budiawan Sitorus</Nama> <umur>19</umur>
</employee>
<employee>
<Nama>Bela Nabila Sitorus</Nama> <umur>16</umur>
</employee>
<employee>
<Nama>Khoirun Nisa</Nama> <umur>19</umur>
</employee>
</employees>
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!