Pada kesempatan sebelumnya kita telah membahas secara lengkap apa itu JSON dan JSON pada PHP. pada kesempatan kali ini kita akan membahas implementasi JSON pada Javascript
Daftar isi
I. Metode Javascript Terkait dengan JSON
Dalam Javascript, ada dua metode yang terkait dengan JSON, yaitu
- var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);5 untuk mengonversi string JSON menjadi objek javascript
- var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);6 untuk mengonversi objek javascript menjadi string JSON
Kedua metode ini didukung oleh hampir semua browser, termasuk browser versi lama. Daftar browser yang didukung adalah sebagai berikut
- Microsoft Internet Explorer. dimulai dengan versi 8. 0
- Microsoft Edge
- Firefox, dimulai dengan versi 3. 5
- Chrome, dimulai dengan versi 4
- Safari, dimulai dengan versi 4
- Opera dari versi 11.5
- Berbagai browser seluler
Daftar selengkapnya bisa dilihat di. A A
1. JSON. mengurai()
Metode ini digunakan untuk mengurai string JSON dan mengubahnya menjadi objek javascript, hasilnya bisa berupa objek dengan tipe data objek atau tipe data array (dalam javascript tipe data array juga merupakan objek - misalnya. var var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);_7 )
1. a. Formasi Penulisan
Format penulisan metode ini adalah sebagai berikut
JSON.parse(text[, reviver]);Dalam metode di atas, argumen teks harus berupa string JSON, misalnya
var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);Jika script tersebut kita jalankan, maka hasil yang kita dapatkan adalah sebagai berikut
Contoh Penggunaan Fungsi JSON. mengurai Dalam Javascript
Selain menggunakan metode javascript bawaan, kita dapat mengurai data JSON dengan library JQuery, yaitu menggunakan metode var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);8, namun metode tersebut sudah tidak digunakan lagi dan tidak relevan karena saat ini semua browser sudah mendukung metode var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);5
1. b. Menggunakan penyegar
Reviver digunakan untuk memanipulasi nilai dari string json sebelum diubah menjadi objek. saat menghidupkan kembali dijalankan, setiap item dari json akan dievaluasi dalam menghidupkan kembali
Peninjau ini adalah fungsi yang memiliki dua argumen. Argumen pertama adalah kuncinya sedangkan yang kedua adalah nilainya. sebagaimana layaknya sebuah fungsi, penghidup ini dapat memberikan nilai pengembalian (return)
Jika revender tidak memberikan nilai pengembalian (return) atau memberikan nilai pengembalian tetapi dengan nilai yang tidak ditentukan, maka properti akan dihapus dari objek
Contoh penggunaan revender
<script> var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data, (key,value) => { // Memanipulasi property website if (key == 'website') { value = '//' + value.toLowerCase(); } // Memanipulasi display_name if (key == 'display_name') { value = value.toUpperCase(); } return value; } ); console.log(obj); // Hasil: {user: "agusph", display_name: "AGUS PRAWOTO HADI", website: "//jagowebdev.com"} </script>Reviver juga bisa menjadi fungsi yang berdiri sendiri, misalnya
<script> var json_data = '["agusph", "Agus Prawoto Hadi", "Jagowebdev.com"]'; obj = JSON.parse(json_data, reviver); function reviver(key,value) { if (key == 1) { value = value.toUpperCase(); } return value; }; console.log(obj); // Hasil: ["agusph", "AGUS PRAWOTO HADI", "Jagowebdev.com"] </script>_2. JSON. merangkai()
Metode var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);_6 digunakan untuk mengonversi objek javascript menjadi string JSON. Objeknya bisa berupa array atau objek
Fungsi ini umumnya digunakan pada AJAX, yaitu saat data akan dikirim ke halaman lain untuk diproses lebih lanjut.  Selain itu, juga digunakan untuk memudahkan menampilkan data objek seperti menggunakan <script> var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data, (key,value) => { // Memanipulasi property website if (key == 'website') { value = '//' + value.toLowerCase(); } // Memanipulasi display_name if (key == 'display_name') { value = value.toUpperCase(); } return value; } ); console.log(obj); // Hasil: {user: "agusph", display_name: "AGUS PRAWOTO HADI", website: "//jagowebdev.com"} </script>1 atau menyimpan data objek ke elemen html
1. a. Formasi Penulisan
Format penulisan metode ini adalah sebagai berikut
JSON.stringify(value [, replacer[, space]]);Argumen <script> var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data, (key,value) => { // Memanipulasi property website if (key == 'website') { value = '//' + value.toLowerCase(); } // Memanipulasi display_name if (key == 'display_name') { value = value.toUpperCase(); } return value; } ); console.log(obj); // Hasil: {user: "agusph", display_name: "AGUS PRAWOTO HADI", website: "//jagowebdev.com"} </script>2 harus diisi sedangkan yang lainnya opsional. Contoh penggunaan metode var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);_6 adalah sebagai berikut
<html> <head> </head> <body> <form action="" method="post" id="form-input"> <label>Nama</label><input type="text" name="nama" value="Agus Prawoto Hadi"/> <label>Email</label><input type="text" name="email" value="prawoto.hadi@gmail.com"/> <label>Website</label><input type="text" name="website" value="Jagowebdev.com"/> <input class="offset button" type="submit" name="submit" value="Submit"/> </form> <script type="text/javascript"> $('#form-input').submit(function(e){ e.preventDefault(); data = {}; $('input[name!="submit"]').each(function(i, elm) { data[$(elm).attr('name')] = elm.value; }) data_json = JSON.stringify(data); alert(data_json); // Send data_json via AJAX... }) </script> </body> </html>Script diatas akan menghasilkan form dengan nama, email, dan website, kemudian jika form kita submit maka akan muncul alert berisi data yang diisi form tersebut, contohnya seperti gambar dibawah ini
Contoh Penggunaan Metode JSON. merangkai()
Lihat demonya di sini
1. b. Menggunakan Pengganti
Replacer ini bekerja sama dengan reinver pada method var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);5, yaitu memanipulasi data awal sebelum string JSON dihasilkan. Replacer dapat berupa fungsi atau array
Berikut adalah contoh pengganti dalam bentuk fungsi
Melanjutkan contoh sebelumnya, script berikut ini akan merubah input nama menjadi huruf besar semua
<script type="text/javascript"> $('#form-input').submit(function(e){ ... data_json = JSON.stringify(data, replacer); ... }) function replacer(json_key, json_value) { if (json_key == 'nama') { json_value = json_value.toUpperCase(); } return json_value; } </script>Lihat demonya di sini
Jika penggantinya berupa array, maka json yang dihasilkan hanya memiliki properti yang ada di dalam array
Misalnya. melanjutkan contoh sebelumnya, pengganti berikut hanya mengambil properti yang memiliki nilai. nama dan email saja
$('#form-input').submit(function(e){ ... data_json = JSON.stringify(data, ['nama', 'email']); // data_json berisi {"nama":"Agus Prawoto Hadi","email":"prawoto.hadi@gmail.com"} ... })1. c. Menggunakan spasi
Argumen spasi digunakan untuk menghasilkan string JSON dengan format yang mudah dibaca. Tidak disarankan menggunakan argumen ini untuk JSON yang akan diproses lebih lanjut
Argumen spasi dapat berisi spasi atau tab, berikut adalah contoh argumen spasi dengan tab
<script> var obj = {}; obj.user = 'agusph'; obj.display_name = 'Agus Prawoto Hadi'; obj.website = 'Jagowebdev.com'; json = JSON.stringify(obj, '', '\t'); console.log(json); </script>Hasil
{ "user": "agusph", "display_name": "Agus Prawoto Hadi", "website": "Jagowebdev.com" }II. JSON dan AJAX
Dalam javascript, semua yang berhubungan dengan JSON kebanyakan melibatkan ajax, karena biasanya string json disediakan oleh halaman lain baik di domain yang sama maupun di domain yang berbeda
Catatan.. pada domain yang berbeda, kami tidak dapat dengan mudah mengambil data json, tetapi kami membutuhkan trik tertentu. lebih lanjut tentang ini kita bahas di artikel.  JSONP Dengan Javascript dan jQuery – Lintas Domain
Untuk mendapatkan data JSON melalui ajax (pada domain yang sama), kita bisa menggunakan objek javascript (native) yaitu objek <script> var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data, (key,value) => { // Memanipulasi property website if (key == 'website') { value = '//' + value.toLowerCase(); } // Memanipulasi display_name if (key == 'display_name') { value = value.toUpperCase(); } return value; } ); console.log(obj); // Hasil: {user: "agusph", display_name: "AGUS PRAWOTO HADI", website: "//jagowebdev.com"} </script>5 atau menggunakan library Javascript seperti jQuery .
Agar lebih mudah, pada tutorial kali ini kita akan menggunakan library jQuery .
AKU AKU AKU. JSON dan AJAX Di Domain yang Sama
Pada domain yang sama, kita dapat dengan mudah mengambil data JSON, berikut adalah contoh script yang mengambil data JSON yang bersumber dari teks biasa maupun dari data yang diambil dari database
1. JSON Dari Teks Biasa – Dengan AJAX
JSON dalam bentuk teks biasa banyak ditemukan pada file konfigurasi. Misal di folder htdocs kita punya file <script> var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data, (key,value) => { // Memanipulasi property website if (key == 'website') { value = '//' + value.toLowerCase(); } // Memanipulasi display_name if (key == 'display_name') { value = value.toUpperCase(); } return value; } ); console.log(obj); // Hasil: {user: "agusph", display_name: "AGUS PRAWOTO HADI", website: "//jagowebdev.com"} </script>6 dengan isi sebagai berikut
var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);0Perhatikan bahwa pada data di atas, yaitu bagian "jalur", saya menghindari garis miring terbalik dari \ ke \\
Mengapa? . Lihat kembali artikel sebelumnya
Selanjutnya misalnya untuk mengurai data kita membuat file <script> var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data, (key,value) => { // Memanipulasi property website if (key == 'website') { value = '//' + value.toLowerCase(); } // Memanipulasi display_name if (key == 'display_name') { value = value.toUpperCase(); } return value; } ); console.log(obj); // Hasil: {user: "agusph", display_name: "AGUS PRAWOTO HADI", website: "//jagowebdev.com"} </script>7 yang berisi script HTML dan javascript sebagai berikut
var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);_1Ketika file di atas dijalankan, hasil yang kita dapatkan adalah
Parsing Data JSON Dengan Javascript – Teks Biasa
Perhatikan.. perhatikan bahwa ketika kita mendefinisikan tipe data dengan json, maka JQuery akan secara otomatis mengurai data JSON menjadi objek javascript, jadi kita tidak perlu menjalankan metode var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);5
Dengan demikian, jika string JSON tidak valid maka akan muncul pesan error, misalnya jika backslash tidak di-escape maka pesan error yang kita dapatkan adalah
Kesalahan Saat Mengurai Data JSON
Kesalahannya adalah karena setelah garis miring terbalik, parser mencari karakter khusus untuk diloloskan, tetapi tidak menemukannya, tetapi hanya menemukan karakter j yang bukan karakter khusus
2. JSON Dari Basis Data – Dengan AJAX
Praktik lain yang paling sering dilakukan adalah membuat JSON dari database, seperti untuk pagination, multi level drop down, dll.
Pada contoh ini, kita akan membuat dynamic drop down dari data database, yaitu sub kategori yang berubah sesuai dengan kategori yang dipilih (misalnya pada form input produk)
Misalnya, kita memiliki tabel <script> var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data, (key,value) => { // Memanipulasi property website if (key == 'website') { value = '//' + value.toLowerCase(); } // Memanipulasi display_name if (key == 'display_name') { value = value.toUpperCase(); } return value; } ); console.log(obj); // Hasil: {user: "agusph", display_name: "AGUS PRAWOTO HADI", website: "//jagowebdev.com"} </script>9 yang ada di database <script> var json_data = '["agusph", "Agus Prawoto Hadi", "Jagowebdev.com"]'; obj = JSON.parse(json_data, reviver); function reviver(key,value) { if (key == 1) { value = value.toUpperCase(); } return value; }; console.log(obj); // Hasil: ["agusph", "AGUS PRAWOTO HADI", "Jagowebdev.com"] </script>0 dengan data sebagai berikut
category_idcategory_nameparent1Books02Music & Instruments13Hobbies14Computer & Internet15Programming16Home & Garden07Lighting68Tools69Bath610Computer & Mobile011Software1012Printers & Scanners1013Laptops1014Modems1015Antivirus1116Office1117Operating System1118Image & Video1119Desktop Programming520Web Programming521Mobile Programming5
Selanjutnya kita membuat file <script> var json_data = '["agusph", "Agus Prawoto Hadi", "Jagowebdev.com"]'; obj = JSON.parse(json_data, reviver); function reviver(key,value) { if (key == 1) { value = value.toUpperCase(); } return value; }; console.log(obj); // Hasil: ["agusph", "AGUS PRAWOTO HADI", "Jagowebdev.com"] </script>_1 yang menghasilkan data JSON yang nantinya akan kita gunakan untuk membuat sub kategori dinamis, adapun script PHP yang kita gunakan adalah sebagai berikut
var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);_2Untuk mengakses script tersebut, url yang kita panggil adalah sebagai berikut.  https. //jagowebdev. com/wp-content/demo/json-on-javascript/category-list. php?induk=1
Hasil yang kita dapatkan
Data JSON di halaman Daftar Kategori
Catatan. Data JSON di atas akan berubah sesuai dengan nilai induknya
Selanjutnya kita buat file <script> var json_data = '["agusph", "Agus Prawoto Hadi", "Jagowebdev.com"]'; obj = JSON.parse(json_data, reviver); function reviver(key,value) { if (key == 1) { value = value.toUpperCase(); } return value; }; console.log(obj); // Hasil: ["agusph", "AGUS PRAWOTO HADI", "Jagowebdev.com"] </script>_2 yang berisi kode script PHP dan HTML untuk membuat form dengan opsi kategori dinamisÂÂ
var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);_3Kode diatas sudah disederhanakan jadi berbeda dengan bentuk aslinya (versi demo dan download), yang penting intinya sama. Tampilan formnya adalah sebagai berikut
Formulir Drop Down Multi Level
Selanjutnya kode javascript yang kita gunakan adalah
var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);_4Catatan. Script diatas juga sudah disederhanakan, intinya untuk memahami cara kerja JSON dengan ajax, untuk script lengkapnya bisa anda lihat di bagian demo atau download di bagian bawah artikel ini
Untuk demonya bisa dilihat di halaman ini atau di bagian demo di bagian bawah artikel ini
Cara kerja script di atas adalah…
ketika kita memilih kategori atau sub kategori, maka sub kategori dibawahnya juga akan berubah, ada yang hanya memiliki satu sub kategori, ada juga yang memiliki lebih dari satu
3. JSON Dari Basis Data – Statis
Pada contoh sebelumnya, ketika kategori atau subkategori berubah, aplikasi akan selalu meminta data JSON yang baru
Pada kondisi tertentu, hal ini akan menyebabkan aplikasi menjadi lambat dan kurang responsif, untuk itu jika datanya tidak terlalu banyak, kita bisa membuatnya statis.
Contoh penerapannya bisa dilihat di halaman ini atau di bagian demo di bagian bawah artikel ini
IV.  Kesimpulan
Untuk mem-parse data JSON dengan Javascript, kita menggunakan metode var json_data = '{"user" : "agusph", "display_name" : "Agus Prawoto Hadi", "website" : "Jagowebdev.com"}'; obj = JSON.parse(json_data); // Objek hanya bisa di buka melalui console console.log(obj); console.log(obj.display_name);5 Metode ini didukung oleh semua browser, sehingga tidak perlu menggunakan bantuan library apapun, termasuk JQuery.
Adapun untuk membuat string JSON dari objek Javascript, kami menggunakan metode _______0_______6, metode ini juga didukung oleh semua browser, jadi tidak perlu bantuan perpustakaan eksternal
Jika data JSON berada di file/halaman yang berbeda, kita dengan mudah memanggilnya dengan AJAX, tetapi jika berada di domain yang berbeda, ada cara lain untuk memanggilnya (tidak dapat dilakukan dengan ajax - dibahas di sini)
Itulah pembahasan tentang json pada javascript part I, semoga bermanfaat
Halaman demo dan unduh file
DEMO LANGSUNG
Untuk versi offline, kami telah menyediakan file php, css, javascript, sql serta petunjuk penggunaannya. Untuk mengunduhnya, silakan klik salah satu tombol media sosial berikut
UNDUH BERKAS
Referensi
- merangkai JSON
- Parse JSON
Berlangganan sekarang
Suka artikel di Jagowebdev. com? . com
Komitmen kita. Kami selalu menghargai privasi Anda dan tidak akan membagikan identitas Anda kepada pihak mana pun