Plugin Formatter JSON di Browser

Pagi, all. Kali ini saya akan membagikan tips trik mengenai cara agar JSON file lebih enak dibaca di browser. Namun sebelum itu kita bahas sedikit dulu mengenai JSON, ya?

Dikutip dari situs http://www.json.org/json-id.html:

JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript, Standar ECMA-262 Edisi ke-3 – Desember 1999.

Biasanya JSON dipakai untuk membagi data ke situs lain dengan format tertentu yang mudah dibaca kemudian bisa diterjemahkan kembali oleh si pengguna. Mungkin sebagian besar pembaca sudah hafal betul dengan JSON, baik format dan penggunaannya, seperti gambar berikut:

Contoh Format JSON
JSON Format

Biasanya JSON dipakai untuk API aplikasi (Facebook API, Twitter API, Instagram API) atau request data dengan menggunakan AJAX. Kalau masih bingung dengan penjelasan saya, mangga cek disini: http://www.myusro.info/2013/01/pengertian-json-javascript-object.html

Namun ketika kita mengembangkan web, terkadang kita pusing sendiri dengan format JSON yang kita terima atau kita buat. Karena terlalu panjang atau terlalu kompleks. Contohnya seperti berikut:

Contoh Format JSON Kompleks
Format JSON yang Komplek

Sekarang ada solusi untuk menampilkan data JSON pada browser agar lebih mudah lagi dalam mengenali object-nya. Pada Browser Chrome ada plugin gratis yang dinamakan JSONView. Anda bisa mengunduhnya disini: https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc, File JSON pada browser akan ditampikan dengan format yang lebih cantik seperti pada gambar berikut:

Tampilan JSON menggunakan plugin JSONView
Tampilan JSON menggunakan plugin JSONView

Lebih enak dilihat, cantik dan dilengkapi dengan highlighter. Kalau Anda pengguna Firefox Mozilla, bisa diunduh disini: https://addons.mozilla.org/id/firefox/addon/jsonview/.

Sekian dari saya, Happy coding.

Loading Facebook Comments ...

Add a Comment

Your email address will not be published. Required fields are marked *