## 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 e**X**tensible **M**arkup **L**anguage, 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](http://www.json.org/)” , dan [jQuery library](https://jquery.com/) 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](https://shancarter.github.io/mr-data-converter/). Kita juga dapat mengubah XML ke JSON atau sebaliknya dengan aplikasi berlisensi Creative Commons ini [utilities-online.info site](http://www.utilities-online.info/xmltojson/). 

Saat mengubah tipe data lain ke JSON, atau membuat tipe data sendiri (dengan objek bersarang), anda dapat memvalidasi JSON dengan  [JSONLint](http://jsonlint.com/) dan dapat menguji file JSON dalam konteks web development dengan [JSFiddle](https://jsfiddle.net/).

## 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](https://www.digitalocean.com/community/tutorials/how-to-create-a-twitter-app).

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](https://www.digitalocean.com/community/tutorials/an-introduction-to-json) di bawah [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](https://creativecommons.org/licenses/by-nc-sa/4.0/).
*
*Sumber gambar: [speakingjs](http://speakingjs.com)*

Mengenal Format JSON

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Mengenal Format JSON

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Hour of Code, Belajar Coding Satu Jam

Jangan Lewatkan, Jogja Geek Job Fair #2 Digelar Lagi Minggu Ini

Wawancara Bersama Luri Darmawan Pembuat AKSI IDE

io.js, Framework JavaScript yang Kompatibel dengan Node.js dan npm

CodeCombat, Belajar Coding Sambil Bermain Game

Mengenal Meteor, Framework JavaScript yang Sedang Naik Daun