Cara menggunakan mysql parse json string
Pada kesempatan sebelumnya telah kita bahas lengkap mengenai apa itu JSON dan JSON Pada PHP. pada kesempatan kali ini kita akan membahas imlementasi JSON Pada Javascript. Show Daftar Isi
I. Javascript Method Terkait JSONPada Javascript, terdapat dua method terkait JSON yaitu:
Kedua method ini sudah disupport oleh hampir semua browser termasuk browser versi lama. Adapun list browser yang telah mendukung adalah sebagai berikut:
List lengkapnya dapat dilihat di: https://caniuse.com/#feat=json 1. JSON.parse()Method ini digunakan untuk memparse (parse = mengurai) string JSON dan mengubah nya menjadi javascript object, hasilnya bisa berupa objek dengan tipe
data objek maupun tipe data array (dalam javascript tipe data array juga berbentuk objek – misal: var 1.a. Format PenulisanFormat penulisan method ini adalah sebagai berikut:
Pada method diatas, argumen text harus berupa JSON string, contoh:
Jika script tersebut kita jalankan, maka hasil yang kita peroleh adalah sebagai berikut: Contoh Penggunaan Fungsi JSON.parse Pada Javascript Selain menggunakan method bawaan javascript, kita dapat melakukan parsing data JSON dengan library JQuery yaitu menggunakan method 1.b. Menggunakan reviverReviver digunakan untuk memanipulasi value dari json string sebelum diubah menjadi objek. ketika reviver dijalankan, setiap item dari json akan di evaluasi di dalam reviver. Reviever ini berupa fungsi yang memiliki dua argumen. Argumen pertama adalah key sedangkan yang kedua adalah value. seperti layaknya fungsi, reviver ini dapat memberikan nilai kembalian (return) Jika reviver tidak memberikan nilai kembalian (return) atau memberikan nilai kembalian namun dengan nilai undefined, maka properti akan dihapus dari objek. Contoh penggunaan reviver:
Reviver juga dapat berupa fungsi yang berdiri sendiri, contoh:
2. JSON.stringify()Method Fungsi ini umumnya digunakan pada AJAX, yaitu ketika data akan dikiriman ke halaman lain untuk diolah lebih lanjut. Selain itu, juga digunakan untuk memudahkan
menampilkan data objek seperti menggunakan 1.a. Format PenulisanFormat penulisan method ini adalah sebagai berikut:
Argumen
Script diatas akan menghasilkan form dengan isian nama, email, dan website, kemudian jika form tersebut kita submit, maka akan muncul alert yang berisi data isian form tersebut, misal seperti gambar dibawah ini: Contoh Penggunaan Method JSON.stringify() Lihat demonya disini. 1.b. Menggunakan ReplacerReplacer ini berfungsi sama seperti reviver pada method Berikut ini contoh replacer berupa fungsi: Melanjutkan contoh sebelumnya, script berikut ini akan merubah inputan nama menjadi huruf kapital semua.
Lihat demonya disini. Jika replacer berupa array, maka json yang dihasilkan hanya memiliki properties sesui yang ada pada array tersebut. Sebagai contoh: melanjutkan contoh sebelumnya, replacer berikut ini hanya mengambil properti yang memiliki nilai: nama dan email saja.
1.c. Menggunakan spaceArgumen space digunakan untuk menghasilkan string JSON dengan format yang mudah dibaca. Tidak disarankan menggunakan argumen ini untuk JSON yang akan diproses lebih lanjut. Argumen space dapat berisi spasi atau tab, berikut ini contoh argumen space dengan tab:
Hasil:
II. JSON dan AJAXPada javascript, semua yang berhubungan dengan JSON sebagian besarnya melibatkan ajax, karena biasanya string json disediakan oleh halaman lain baik pada domain yang sama maupun pada domain yang berbeda. Note… pada domain berbeda, kita tidak bisa dengan mudah mengambil data json, melainkan perlu trik tertentu. lebih jauh mengenai hal ini kita bahas pada artikel: JSONP Dengan Javascript dan jQuery – Lintas Domain . Untuk mendapatkan data JSON melalui ajax (pada domain yang sama), kita bisa menggunakan objek bawaan javascript (native) yaitu objek Agar lebih mudah, pada tutorial kali ini kita akan menggunakan library jQuery. III. JSON dan AJAX Pada Domain Yang SamaPada domain yang sama, kita dapat dengan mudah mengambil data JSON, berikut ini contoh script mengambil data JSON yang bersumber dari plain teks maupun dari data yang diambil dari database. 1. JSON Dari Plain Teks – Dengan AJAXJSON berbentuk plain teks sering kita jumpai pada file konfigurasi. Sebagai contoh
misal didalam folder htdocs kita memiliki file
Perhatikan bahwa pada data diatas, yaitu bagian “path” saya mengescape backslash dari \ menjadi \\ Kenapa? karena backslash adalah karakter khusus sehingga jika ingin menggunakannya kita perlu menambahkan escape. Lihat kembali artikel sebelumnya. Selanjutnya, misal untuk memparse data tersebut kita membuat file
Ketika file diatas dijalankan, maka hasil yang kita peroleh adalah: Parsing Data JSON Dengan Javascript – Plain Text Note… perhatikan bahwa ketika kita mendefinisikan dataType dengan json, maka secara otomatis, JQuery akan melakukan parsing data JSON menjadi objek javascript, sehingga kita tidak perlu menjalankan method Dengan demikian, jika string JSON tidak valid, akan memunculkan pesan error, misal jika backslash tidak di escape, pesan error yang kita dapatkan adalah: Error Ketika Parsing Data JSON Error tersebut dikarenakan setelah backslash, parser mencari karakter khusus untuk di escape, namun tidak menemukannya, melainkan hanya menemukan karakter j yang bukan karakter khusus. 2. JSON Dari Database – Dengan AJAXPraktik lain yang paling sering dilakukan adalah membuat JSON dari database, seperti untuk pagination, multi level drop down, dll. Pada contoh kali ini kita akan membuat drop down dinamis dari data database yaitu sub kategori yang berubah-ubah sesuai dengan kategori yang dipilih (misal pada form input produk). Sebagai contoh kita memiliki tabel
Selanjutnya kita buat file
Untuk mengakses script tersebut, url yang kita panggil adalah sebagai berikut: https://jagowebdev.com/wp-content/demo/json-pada-javascript/category-list.php?parent=1 Hasil yang kita peroleh: Data JSON Pada Halaman Category List Note.. Data JSON diatas akan berubah ubah sesuai dengan nilai parent. Selanjutnya kita buat file
Kode diatas sudah disederhanakan, sehingga berbeda dengan bentuk aslinya (versi demo dan download), yang penting esensinya sama. Bentuk tampilan form nya adalah sebagai berikut: Form Multi Level Drop Down Selanjutnya, kode javascript yang kita gunakan adalah:
Note: script diatas juga sudah disederhanakan, intinya sobat paham cara kerja JSON dengan ajax, untuk script lengkap bisa dilihat di bagian demo atau di download di bagian bawah artikel ini. Untuk demonya bisa dilihat pada halaman ini atau pada bagian demo yang ada di bagian bawah artikel ini. Cara kerja script diatas adalah… ketika kita memilih kategori maupun sub kategori, maka sub kategori di bawahnya juga akan berubah ubah, ada yang hanya satu sub kategori, ada yang lebih dari satu. 3. JSON Dari Database – StatisPada contoh sebelumnya, ketika kategori maupun sub kategori berubah, aplikasi akan selalu merequest data JSON baru. Pada kondisi tertentu, hal ini akan menyebabkan aplikasi menjadi lambat dan kurang responsif, untuk itu jika data tidak terlalu banyak, kita dapat membuatnya menjadi statis. Contoh implementasinya bisa dilihat di halaman ini atau pada bagian demo yang ada di bagian bawah artikel ini. IV. KesimpulanUntuk memparsing data JSON dengan Javascript kita gunakan method Sedangkan untuk membuat JSON string dari objek Javascript, kita gunakan method Jika data JSON berada di file/halaman berbeda, kita dengan mudah memanggilnya dengan AJAX, namun jika berada di domain berbeda, berbeda pula cara memanggilnya (tidak bisa dengan ajax – dibahas di sini). Demikian pembahasan tentang json pada javascript part I, semoga bermanfaat. Halaman demo dan file download: Untuk versi offline, telah kami sediakan file php, css, javascript, sql serta petunjuk penggunaannya. Untuk mendownloadnya, silakan klik tombol salah satu social media berikut  ini: Referensi:
Subscibe NowSuka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com |