Apa Itu JSON?

Apa Itu JSON?
Sesudah kita mengetahui apa itu Web API dan cara pengujiannya memakai Postman, sekarang waktunya kita mempelajari suatu format yang sering dipakai dalam transaksi data memakai Web API, yaitu JSON.

Jauh pada materi sebelumnya, atau bila Kamu telah mengikuti kelas Belajar Dasar Pemrograman Web,  pastinya Kamu telah mengenal dan memakai JSON bukan? Pada materi saat ini kita akan mengulas JSON lebih spesifik lagi.
JSON sendiri ialah singkatan dari JavaScript Object Notation. JSON merupakan format yang biasa dipakai dalam pertukaran data. Sekarang ini JSON banyak diandalkan sebab formatnya berbasis teks dan cukup mudah dibaca.
Bukan cuma JavaScript, meskipun mempunyai nama JavaScript Object Notation, format JSON ini bisa dipakai oleh hampir seluruh bahasa pemrograman yang ada. Bila Kamu belajar fundamental dalam membangun aplikasi Android pada kelas Dicoding, baik memakai Kotlin maupun Java, Kamu akan berhadapan dengan JSON untuk transaksi datanya.
Lalu seperti apa sebetulnya rupa JSON ini? Struktur JSON bisa terbentuk dari 2 (dua) literal data, yaitu objek dan array.

  1. {

  2.     "error": false,

  3.     "message": "success",

  4.     "books": [

  5.     {

  6.     "id": 1,

  7.     "title": "Laskar Pelangi",

  8.     "author": "Andrea Hirata"

  9.     },

  10.     {

  11.     "id": 2,

  12.     "title": "Filosofi Kopi",

  13.     "author": "Dewi Lestari"

  14.     },

  15.     {

  16.     "id": 3,

  17.     "title": "Clean Code",

  18.     "author": "Robert C Martin"

  19.     }

  20.    ]

  21. }

  22.  

  23.  


Data yang merupakan objek pada JSON selalu dimulai dengan tanda { (buka kurung kurawal)  dan diakhiri dengan tanda tutup kurung kurawal } (tutup kurung kurawal). Sedangkan array pada JSON selalu dimulai dengan tanda [ (buka kurung siku) dan diakhiri dengan tanda ] (tutup kurung siku).
20200313225902ae266e132fb41907aef8dbcd4201c57c.png
Struktur dari JSON juga memakai format key: value untuk menampilkan datanya. Contoh di atas error merupakan key dan false merupakan value. Penulisan JSON hampir identik dengan JavaScript objek. Tetapi key pada JSON selalu dituliskan di dalam tanda “ “ (kutip dua).

  1. { "message": "success" }


Pada JSON value kita bisa menetapkan nilai dengan beragam tipe data, di antaranya:
  • String
  • Number
  • Object
  • Array
  • Boolean
  • Null

Using JSON in JavaScript

Sesudah mengenal rupa, struktur dan penulisan JSON, berikutnya bagaimana cara memakai JSON pada JavaScript? Sama seperti memakai objek JavaScript biasa!

  1. const data = {

  2. "error": false,

  3. "message": "success",

  4. "books": [

  5. {

  6. "id": 1,

  7. "title": "Laskar Pelangi",

  8. "author": "Andrea Hirata"

  9. },

  10. {

  11. "id": 2,

  12. "title": "Filosofi Kopi",

  13. "author": "Dewi Lestari"

  14. },

  15. {

  16. "id": 3,

  17. "title": "Clean Code",

  18. "author": "Robert C Martin"

  19. }

  20. ]

  21. };

  22.  

  23. console.log(`Error? ${data.error}`);

  24. console.log("Daftar Buku: ");

  25. data.books.forEach((book, index) => {

  26. console.log(`${index + 1}. ${book.title} (${book.author})`);

  27. })

  28.  

  29. /* output

  30. Error? false

  31. Daftar Buku:

  32. 1. Laskar Pelangi (Andrea Hirata)

  33. 2. Filosofi Kopi (Dewi Lestari)

  34. 3. Clean Code (Robert C Martin)

  35. */


Kita dapat mengakses data JSON objek memakai tanda titik sesudah variabel yang menampungnya. Contoh cara mengakses data dengan key books seperti:

  1. data.books


Tetapi bila key terdiri atas karakter yang tidak bisa dipakai dalam penamaan variabel seperti white spacedashslash atau yang lainnya, datanya bisa kita askes melalui indexing semacam ini:

  1. const data = {

  2.   ....,

  3.  "book daftar": [

  4.   ......

  5.  ]

  6. };

  7.  

  8. data["book daftar"].forEach((book, index) => {

  9.  console.log(`${index + 1}. ${book.title} (${book.author})`);

  10. })

  11.  

  12. /* output

  13. Daftar Buku:

  14. 1. Laskar Pelangi (Andrea Hirata)

  15. 2. Filosofi Kopi (Dewi Lestari)

  16. 3. Clean Code (Robert C Martin)

  17. */


Seperti yang telah kita ketahui, JSON ini pada umumnya dipakai untuk transaksi data ke/dari web server. Saat transaksi data berlangsung, data itu selalu dalam wujud string.
20200313230409c9fc8c2540e6f3f5d173d016dba073e3.pngContoh JSON yang dihasilkan oleh Web Server
Nah untuk mengurus data JSON dalam wujud string pada JavaScript, kita harus melakukan parse dengan memakai global object JSON. Terdapat dua method penting dalam global object JSON, yang pertama parse() dan yang kedua stringify()
Method JSON.parse() dipakai untuk merubah JSON dalam wujud String jadi objek JavaScript. Misalnya semacam ini:

  1. const jsonString = `{

  2.  "error": false,

  3.  "message": "success",

  4.  "books": [

  5.    {

  6.      "id": 1,

  7.      "title": "Laskar Pelangi",

  8.      "author": "Andrea Hirata"

  9.    },

  10.    {

  11.      "id": 2,

  12.      "title": "Filosofi Kopi",

  13.      "author": "Dewi Lestari"

  14.    },

  15.    {

  16.      "id": 3,

  17.      "title": "Clean Code",

  18.      "author": "Robert C Martin"

  19.    }

  20.  ]

  21. }`;

  22.  

  23. const data = JSON.parse(jsonString);

  24.  

  25. data.books.forEach((book, index) => {

  26.  console.log(`${index + 1}. ${book.title} (${book.author})`);

  27. })

  28.  

  29. /* output

  30. Daftar Buku:

  31. 1. Laskar Pelangi (Andrea Hirata)

  32. 2. Filosofi Kopi (Dewi Lestari)

  33. 3. Clean Code (Robert C Martin)

  34. */


Lalu method JSON.stringify() mempunyai fungsi sebaliknya. Yaitu merubah JavaScript objek dalam wujud JSON string. Misalnya semacam ini:

  1. const data = {

  2.  error: false,

  3.  message: "success",

  4.  books: [

  5.    {

  6.      "id": 1,

  7.      "title": "Laskar Pelangi",

  8.      "author": "Andrea Hirata"

  9.    },

  10.    {

  11.      "id": 2,

  12.      "title": "Filosofi Kopi",

  13.      "author": "Dewi Lestari"

  14.    },

  15.    {

  16.      "id": 3,

  17.      "title": "Clean Code",

  18.      "author": "Robert C Martin"

  19.    }

  20.  ]

  21. };

  22.  

  23. const jsonString = JSON.stringify(data);

  24. console.log(jsonString);

  25.  

  26. /* output:

  27. {"error":false,"message":"success","books":[{"id":1,"title":"Laskar Pelangi","author":"Andrea Hirata"},{"id":2,"title":"Filosofi Kopi","author":"Dewi Lestari"},{"id":3,"title":"Clean Code","author":"Robert C Martin"}]}

  28. */



Butuh jasa pembuatan website di Makassar? kontak kami. Jasa Pembuatan Aplikasi Android, Jasa SEO dan SEM, SMM, Internet Marketing Agency, Social Media Strategist Makassar, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik bisa kami lakukan

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat