Home » Uncategorized » Apa Itu JSON?

Apa Itu JSON?

Jan
29
2020
by : gaptek . Posted in : Uncategorized

Apa Itu JSON?

Setelah kita mengetahui Apa Itu JSON dan cara pengujiannya menggunakan Postman. Sekarang saatnya kita mempelajari suatu format yang biasa digunakan dalam transaksi data menggunakan Web API. Akan di ajarkan Apa Itu JSON? Jauh pada materi sebelumnya, atau jika Anda sudah mengikuti kelas Belajar Dasar Pemrograman Web. Tentunya Anda sudah mengenal dan menggunakannya bukan? Pada materi kali ini kita akan membahas Apa Itu JSON? lebih detail lagi.

JSON sendiri adalah singkatan dari JavaScript Object Notation. yang merupakan format sering digunakan dalam pertukaran data. Saat ini banyak diandalkan karena formatnya berbasis teks dan relatif mudah dibaca.
Bukan hanya JavaScript, walaupun memiliki nama JavaScript Object Notation, format JSON ini dapat digunakan oleh hampir semua bahasa pemrograman yang ada. Jika Anda belajar fundamental dalam membangun aplikasi Android pada kelas Dicoding, baik menggunakan Kotlin ataupun Java, Anda akan berhadapan dengan untuk transaksi datanya.
Lalu seperti apa sebenarnya rupa JSON ini? Struktur dapat terbentuk dari 2 (dua) literal data, yakni objek dan array.
    1. {

 

    1.     “error”: false,

 

    1.     “message”: “success”,

 

    1.     “books”: [

 

    1.     {

 

    1.     “id”: 1,

 

    1.     “title”: “Laskar Pelangi”,

 

    1.     “author”: “Andrea Hirata”

 

    1.     },

 

    1.     {

 

    1.     “id”: 2,

 

    1.     “title”: “Filosofi Kopi”,

 

    1.     “author”: “Dewi Lestari”

 

    1.     },

 

    1.     {

 

    1.     “id”: 3,

 

    1.     “title”: “Clean Code”,

 

    1.     “author”: “Robert C Martin”

 

    1.     }

 

    1.    ]

 

    1. }

 

    1.  

 

    1.  

Identik dengan JavaScript objek

 

Data yang merupakan objek pada JSON selalu diawali dengan tanda { (buka kurung kurawal)  dan diakhiri dengan tanda tutup kurung kurawal } (tutup kurung kurawal). Sedangkan array pada selalu diawali dengan tanda [ (buka kurung siku) dan diakhiri dengan tanda ] (tutup kurung siku).
Apa Itu JSON?
Struktur dari JSON juga menggunakan format key: value untuk menampilkan datanya. Contoh di atas error merupakan key dan false merupakan value. Penulisan hampir identik dengan JavaScript objek. Namun key pada JSON selalu dituliskan di dalam tanda “ “ (kutip dua).
    1. { “message”: “success” }

 

 

Pada value kita dapat menetapkan nilai dengan berbagai tipe data, di antaranya:
  • String
  • Number
  • Object
  • Array
  • Boolean
  • Null

Using JSON in JavaScript

Setelah mengenal rupa, struktur dan penulisan, selanjutnya bagaimana cara menggunakan JSON pada JavaScript? Sama seperti menggunakan objek JavaScript biasa!
    1. const data = {

 

    1. “error”: false,

 

    1. “message”: “success”,

 

    1. “books”: [

 

    1. {

 

    1. “id”: 1,

 

    1. “title”: “Laskar Pelangi”,

 

    1. “author”: “Andrea Hirata”

 

    1. },

 

    1. {

 

    1. “id”: 2,

 

    1. “title”: “Filosofi Kopi”,

 

    1. “author”: “Dewi Lestari”

 

    1. },

 

    1. {

 

    1. “id”: 3,

 

    1. “title”: “Clean Code”,

 

    1. “author”: “Robert C Martin”

 

    1. }

 

    1. ]

 

    1. };

 

    1.  

 

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

 

    1. console.log(“Daftar Buku: “);

 

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

 

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

 

    1. })

 

    1.  

 

    1. /* output

 

    1. Error? false

 

    1. Daftar Buku:

 

    1. 1. Laskar Pelangi (Andrea Hirata)

 

    1. 2. Filosofi Kopi (Dewi Lestari)

 

    1. 3. Clean Code (Robert C Martin)

 

    1. */

 

 

Kita bisa mengakses data JSON objek menggunakan tanda titik setelah variabel yang menampungnya. Contoh cara mengakses data dengan key books seperti:
    1. data.books

 

 

Namun jika key terdiri dari karakter yang tidak dapat digunakan dalam penamaan variabel seperti white spacedashslash atau yang lainnya, datanya dapat kita askes melalui indexing seperti ini:
    1. const data = {

 

    1.   ….,

 

    1.  “book list”: [

 

    1.   ……

 

    1.  ]

 

    1. };

 

    1.  

 

    1. data[“book list”].forEach((book, index) => {

 

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

 

    1. })

 

    1.  

 

    1. /* output

 

    1. Daftar Buku:

 

    1. 1. Laskar Pelangi (Andrea Hirata)

 

    1. 2. Filosofi Kopi (Dewi Lestari)

 

    1. 3. Clean Code (Robert C Martin)

 

    1. */

 

 

Seperti yang sudah kita ketahui, JSON ini biasanya digunakan untuk transaksi data ke/dari web server. Ketika transaksi data berlangsung, data tersebut selalu dalam bentuk string.
Apa Itu JSON?Contoh yang dihasilkan oleh Web Server
Nah untuk mengelola data dalam bentuk string pada JavaScript, kita perlu melakukan parse dengan menggunakan global object JSON. Terdapat dua method penting dalam global object , yang pertama parse() dan yang kedua stringify().
Method JSON.parse() digunakan untuk mengubah dalam bentuk String menjadi objek JavaScript. Contohnya seperti ini:
    1. const jsonString = `{

 

    1.  “error”: false,

 

    1.  “message”: “success”,

 

    1.  “books”: [

 

    1.    {

 

    1.      “id”: 1,

 

    1.      “title”: “Laskar Pelangi”,

 

    1.      “author”: “Andrea Hirata”

 

    1.    },

 

    1.    {

 

    1.      “id”: 2,

 

    1.      “title”: “Filosofi Kopi”,

 

    1.      “author”: “Dewi Lestari”

 

    1.    },

 

    1.    {

 

    1.      “id”: 3,

 

    1.      “title”: “Clean Code”,

 

    1.      “author”: “Robert C Martin”

 

    1.    }

 

    1.  ]

 

    1. }`;

 

    1.  

 

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

 

    1.  

 

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

 

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

 

    1. })

 

    1.  

 

    1. /* output

 

    1. Daftar Buku:

 

    1. 1. Laskar Pelangi (Andrea Hirata)

 

    1. 2. Filosofi Kopi (Dewi Lestari)

 

    1. 3. Clean Code (Robert C Martin)

 

    1. */

 

 

Lalu method JSON.stringify() memiliki fungsi sebaliknya. Yaitu mengubah JavaScript objek dalam bentuk JSON string. Contohnya seperti ini:
    1. const data = {

 

    1.  error: false,

 

    1.  message: “success”,

 

    1.  books: [

 

    1.    {

 

    1.      “id”: 1,

 

    1.      “title”: “Laskar Pelangi”,

 

    1.      “author”: “Andrea Hirata”

 

    1.    },

 

    1.    {

 

    1.      “id”: 2,

 

    1.      “title”: “Filosofi Kopi”,

 

    1.      “author”: “Dewi Lestari”

 

    1.    },

 

    1.    {

 

    1.      “id”: 3,

 

    1.      “title”: “Clean Code”,

 

    1.      “author”: “Robert C Martin”

 

    1.    }

 

    1.  ]

 

    1. };

 

    1.  

 

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

 

    1. console.log(jsonString);

 

    1.  

 

    1. /* output:

 

    1. {“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”}]}

 

    1. */

 

 

Leave a Reply

Banyak Hal Yang Bisa Di Dapatkan Di Dalam Blog Ini

Phone
Copyright © 2012