0

0

0

share


#javascript#json
0 Reaksi

0 Komentar

Mengenal Format JSON

Profile
Bagus Aji Santoso

19 Oktober 2017

Mengenal Format JSON

Pendahuluan

JSON — singkatan untuk JavaScript Object Notation — adalah sebuah format untuk berbagi data. Seperti dapat kita lihat dari namanya, JSON diturunkan dari bahasa pemrograman javaScript, akan tetapi format ini tersedia bagi banyak bahasa lain termasuk Python, Ruby, PHP, dan Java. JSON biasanya dilafalkan seperti nama "Jason."

JSON menggunakan ekstensi .json saat ia berdiri sendiri. Saat didefinisikan di dalam format file lain (seperti di dalam .html), ia dapat tampil didalam tanda petik sebagai JSON string, atau ia dapat dimasukkan kedalam sebuah variabel. Format ini sangat mudah untuk ditransfer antar server web dengan klien atau browser.

Karena sangat mudah dibaca dan ringan, JSON memberikan alternatif lebih baik dari XML adn membutuhkan formatting yang tidak banyak. Panduan ini akan membantu pembaca untuk memahami apa itu JSON, bagaimana menggunakan data di file JSON, serta struktur dan sintaks dari format ini.

Sintaks dan Struktur

Sebuah objek JSON adalah format data key-value yang biasanya di render di dalam kurung kurawal. Saat kita bekerja dengan JSON, kita akan sering melihat objek JSON disimpan di dalam sebuah file .json, tapi mereka juga dapat disimpan sebagai objek JSON atau string di dalam sebuah program.

Sebuah objek JSON terlihat seperti berikut ini:

{
  "first_name" : "Sammy",
  "last_name" : "Shark",
  "location" : "Ocean",
  "online" : true,
  "followers" : 987 
}

Meskipun contoh di atas sangat singkat dan JSON dapat memiliki isi yang sangat banyak, contoh di atas secara umum menggambarkan dua kurung kurawal { } di awal dan di akhir dengan pasangan key-value diantara kedua tanda kurang. Sebagian besar data yang dipakai di JSON dienkapsulasi di dalam sebuah objek JSON.

Pasangan key-value memiliki tanda titik dua diantara mereka "key" : "value". Setiap key-value dipisahkan oleh sebuah koma, sehingga ditengah isi sebuah JSON terlihat seperti in: "key" : "value", "key" : "value", "key": "value". Pada contoh di atas, nilai pertama pasangan key-value kita adalah "first_name" : "Sammy".

Key JSON berada di sebelah kiri tanda titik dua. Mereka perlu dibungkus oleh tanda petik dua seperti ini: "key", dan dapat berupa string apapun yang valid. Di dalam setiap objek, key haruslah unik. Key ini dapat memiliki spasi seperti di "first name", namun menambahkannya akan membuat kita lebih repot saat akan mengaksesnya di proses ngoding sehingga disarankan untuk menggunakna underscore seperti pada "first_name".

Value JSON ada di sebelah kanan tanda titik dua. Ada enam tipe data dasar yang bisa dipakai untuk mengisinya yaitu:

  • strings
  • numbers
  • objects
  • arrays
  • Booleans (true atau false)
  • null

Secara lebih luas, value juga dapat berisi tipe data yang lebih kompleks misalnya JSON object atau JSON array yang akan kita bahas di bagian berikutnya.

Setiap tipe data yang dimasukkan sebagai valu ke dalam JSON akan mengingat sintaksnya, jadi string akan diberikan tanpa petik, namun tidak dengan angka.

Meskipun di dalam file .json kita sering melihat format ini ditulis dalam beberapa baris, JSON juga dapat ditulis disatu baris saja.

{ "first_name" : "Sammy", "last_name": "Shark",  "online" : true, }

Menulis format JSON dalam bentuk beberapa baris akan membantunya lebih mudah dibaca terutama saat sudah memiliki banyak data. Karena JSON mengabaikan spasi antara elemennya, kita bisa memberikan spasi antara key-value sehingga menjadi lebih mudah di baca:

{ 
  "first_name"  :  "Sammy", 
  "last_name"   :  "Shark", 
  "online"      :  true 
}

Penting juga untuk diingat, meskipun terlihat sama sebuah objek JSON tidak memiliki format yang sama dengan objek JavaScript. Jadi, meskipun kita bisa menambah fungsi kedalam objek JavaScript, kita tidak bisa menggunakannya sebagai valus di JSON. Kelebihan utama JSON adalah kemudahan dan kesiapannya untuk ditransfer antar bahasa pemrograman. Objek JavaScript hanya bisa digunakan di dalam bahasa pemrograman JavaScript.

Sejauh ini kita sudah melihat format JSON dalam bentuk yang sederhana, namun JSON Juga dapat menjadi lebih kompleks yang terdiri dari objek dan array bersarang. Kita akan membahas JSON yang lebih kompleks di bagian berikutnya.

Bekerja dengan Data Kompleks di JSON

JSON dapat menyimpan objek bersarang maupun array bersarang. Seperti data lain, objek atau array ini dapat disimpan ke dalam sebuah key

Object Bersarang

Di dalam file users.json berikut, untuk empat pengguna ("sammy", "jesse", "drew", "jamie") ada sebuah objek JSON didalam setiap value key keempatnya yang memiliki key-nya sendiri ("username" dan "location") milik setiap user.

users.json

{ 
  "sammy" : {
    "username"  : "SammyShark",
    "location"  : "Indian Ocean",
    "online"    : true,
    "followers" : 987
  },
  "jesse" : {
    "username"  : "JesseOctopus",
    "location"  : "Pacific Ocean",
    "online"    : false,
    "followers" : 432
  },
  "drew" : {
    "username"  : "DrewSquid",
    "location"  : "Atlantic Ocean",
    "online"    : false,
    "followers" : 321
  },
  "jamie" : {
    "username"  : "JamieMantisShrimp",
    "location"  : "Pacific Ocean",
    "online"    : true,
    "followers" : 654
  }
}

Pada contoh di atas, tanda kurung kurawal digunakan untuk membuat objek JSON bersarang di mana setiap username dan location masing-masing menjadi miliki keempat user. Seperti data lainnya, koma dipakai untuk memisahkan antar elemen.

Array Bersarang

Data dapat dimasukkan ke dalam format JSON menggunakan array JavaScript sebagai sebuah value. JavaScript menggunakan kurung siku [ ] di awal dan akhir sebuah array. Array adalah sebuah koleksi terurutdan memiliki tipe data yang berbeda.

Kita dapat menggunakan array saat bekerja dengan banyak data yang dapat dikelompokkan, seperti profil sosial media yang dimiliki oleh seorang user.

Setelah kita membahas tentang array bersarang, profil user untuk Sammy dapat terlihat sebagai berikut:

user_profile.json

{ 
  "first_name" : "Sammy",
  "last_name" : "Shark",
  "location" : "Ocean",
  "websites" : [ 
    {
      "description" : "work",
      "URL" : "https://www.digitalocean.com/"
    },
    {
      "desciption" : "tutorials",
      "URL" : "https://www.digitalocean.com/community/tutorials"
    }
  ],
  "social_media" : [
    {
      "description" : "twitter",
      "link" : "https://twitter.com/digitalocean"
    },
    {
      "description" : "facebook",
      "link" : "https://www.facebook.com/DigitalOceanCloudHosting"
    },
    {
      "description" : "github",
      "link" : "https://github.com/digitalocean"
    }
  ]
}

Key "websites" dan "social_media" dapat menggunakan array untuk menyimpan data yang dimiliki oleh Sammy berupa 2 link website dan 3 profil sosial media. Kita tahu bahwa data tersebut array karena ada kurung sikunya.

Menggunakan data bersarang di dalam format JSON memungkinkan kita untuk bekerja pada data yang lebih kompleks.

Perbandingan dengan XML

XML, atau eXtensible Markup Language, adalah sebuah cara untuk menyimpan data yang dapat dibaca baik oleh manusia maupun mesin. Format XML tersedia secara luas bagi banyak bahasa pemrograman.

XML sangat mirip dengan JSON tapi membutuhkan lebih banyak teks sehingga lebih panjang isinya dan lebih lama untuk membaca dan menulisnya. XML harus dibaca dengan sebuah XML parser, namun JSON dapat dibaca menggunakan fungsi standar. Juga seperti JSON, XML tidak bisa menggunakan array.

Kita akan melihat contoh data yang disimpan ke dalam format XML dan JSON.

users.xml

<users>
    <user>
        <username>SammyShark</username> <location>Indian Ocean</location>
    </user>
    <user>
        <username>JesseOctopus</username> <location>Pacific Ocean</location>
    </user>
    <user>
        <username>DrewSquir</username> <location>Atlantic Ocean</location>
    </user>
    <user>
        <username>JamieMantisShrimp</username> <location>Pacific Ocean</location>
    </user>
</users>

users.json

{"users": [
  {"username" : "SammyShark", "location" : "Indian Ocean"},
  {"username" : "JesseOctopus", "location" : "Pacific Ocean"},
  {"username" : "DrewSquid", "location" : "Atlantic Ocean"},
  {"username" : "JamieMantisShrimp", "location" : "Pacific Ocean"}
] }

Kita dapat lihat bahwa JSON jauh lebih ringkas dan tidak memerlukan tag penutup seperti halnya XML. Sebagai tambahan, XML tidak menggunakan sebuah array seperti yang tadi kita pelajari.

Jika pembaca sudah mengenal HTML, pembaca akan melihat kemiripan dari penggunaan tag-nya. Meski JSON lebih singkat dan lebih mudah dari XML serta dapat dipakai diberbagai situasi termasuk aplikasi AJAX, kita perlu memahami tipe proeyk yang sedang dikerjakan sebelum memutuskan struktur data apa yang akan di pakai.

Sumber-sumber Lain

JSON merupakan format natural untuk JavaScript dan memiliki banyak implementasi yang dapat langsung dipakai diberbagai bahasa pemrograman populer. Pembaca dapat melihat bahasa yang didukung pada situs “Introducing JSON” , dan jQuery library juga memiliki kemampuan untuk membaca format ini.

Seringkali, kita tidak perlu menulis JSON utuh namun mengambilnya dari suatu sumber data atau mendapatnya dari mengubah jenis data lain ke JSON. Kita dapat mengubah CSV atau data yang terpisah dengan tab ke dalam JSON menggunakan aplikasi open source Mr. Data Converter. Kita juga dapat mengubah XML ke JSON atau sebaliknya dengan aplikasi berlisensi Creative Commons ini utilities-online.info site.

Saat mengubah tipe data lain ke JSON, atau membuat tipe data sendiri (dengan objek bersarang), anda dapat memvalidasi JSON dengan JSONLint dan dapat menguji file JSON dalam konteks web development dengan JSFiddle.

Penutup

JSON adalah format yang ringan dan mempermudah kita dapat membagi, menyimpan dan bekerja dengan data. Sebagi sebuah format, JSON telah mendapatkan dukungan yang makin meningkat dalam bentuk API, misalnya di Twitter API.

Karena kita mungkin akan jarang membuat file .json sendiri namun mengunduhnya dari sumber lain, pikirkan bagaimana menggunakan JSON dengan baik diprogram daripada memikirkan strukturnya.

*Diterjemahkan dari An Introduction to JSON di bawah Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. * Sumber gambar: speakingjs

0

0

0

share