Cara menggunakan kunci/nilai set objek javascript

JSON adalah turunan dari JavaScript yang digunakan dalam transfer dan penyimpanan data. Saat ini, bahasa ini sering digunakan dalam pembuatan aplikasi web

Nah, dalam artikel kali ini, Anda tidak hanya diajak untuk memahami maknanya saja. Anda juga akan belajar tentang fungsi, sintaks, dan cara menggunakannya. Yuk, nonton bareng

Daftar isi

Apa itu JSON?

Seperti disebutkan sebelumnya, notasi objek JavaScript atau JSON adalah format yang digunakan untuk menyimpan dan mentransfer data

Tidak seperti XML (extensive markup language) dan format lain yang memiliki fungsi serupa, JSON memiliki struktur data yang sederhana dan mudah dipahami. Itu sebabnya JSON sering digunakan pada API

JSON sendiri terdiri dari dua struktur yaitu

• Sekelompok nilai berpasangan. Di JSON, contohnya adalah objek.  
• Daftar nilai berurutan, seperti larik

JSON juga tidak hanya dapat digunakan dengan JavaScript. Berikut beberapa bahasa pemrograman lain yang mendukung penggunaan format tersebut

• PHP
• Piton
• Rubi
• C++
• Perl

Baca Juga. Bahasa pemrograman

fungsi JSON

Fungsi JSON kurang lebih sama dengan XML. Sebelum JSON dibuat, format bahasa markup ini sering digunakan dalam AJAX JavaScript (JavaScript asinkron dan XML) untuk penyimpanan dan transfer data

Berkat kombinasi keduanya, pengembang dapat membuat halaman situs web tempat informasi dapat diperbarui tanpa harus memuat ulang halaman. Hal ini sudah menjadi hal yang lumrah, apalagi dengan tren aplikasi web yang terus berkembang

Nah, JSON memiliki fungsi yang sama. Bedanya, ia memiliki beberapa keunggulan yang membuatnya lebih sering digunakan daripada XML, antara lain

• File yang lebih ringan
• Struktur kode yang lebih sederhana
• Kode yang mudah dipahami manusia

Agar Anda memahami ketiga keunggulan tersebut, mari kita lihat contoh pada poin selanjutnya

Baca juga. Perbedaan antara Java dan JavaScript

Perbandingan JSON dan XML

Seberapa sederhana kode JSON dibandingkan dengan kode XML? . Contoh pertama adalah kode XML

<users>
    <user>
        <username>Anton</username> <lokasi>Bandung</lokasi>
    </user>
    <user>
        <username>Budi</username> <lokasi>Semarang</lokasi>
    </user>
    <user>
        <username>Nana</username> <lokasi>Surabaya</lokasi>
    </user>
    <user>
        <username>Jamal</username> <lokasi>Tangerang</lokasi>
    </user>
</users>

Nah, contoh kode JavaScript JSON adalah sebagai berikut

{"users": [
  {"username" : "Anton", "lokasi" : "Bandung"},
  {"username" : "Budi", "lokasi" : "Semarang"},
  {"username" : "Nana", "lokasi" : "Surabaya"},
  {"username" : "Jamal", "lokasi" : "Tangerang"}
] }

Anda dapat melihat bahwa kode JSON lebih sederhana karena tidak memerlukan tag pembuka dan penutup. Dengan demikian, kodenya juga lebih mudah dipahami. Selain itu, keunggulan ini juga memberikan dua keuntungan lainnya yaitu

• Proses loading data lebih ringan karena ukuran file yang kecil
• Pengodean lebih cepat dengan kode sederhana

Baca Juga. Cara Menginstal Node.js. js dan NPM di Ubuntu 18. 04

Cara Menggunakan JSON

Ada dua hal yang perlu Anda pelajari untuk menggunakan JSON, yaitu sintaks (cara menulis) dan jenis nilainya. Untuk memahami keduanya, simak penjelasan di bawah ini.  

sintaks JSON

Contoh pada bagian sebelumnya menunjukkan bahwa JSON memiliki struktur kode yang sederhana. Namun, mari kita lihat contoh yang lebih sederhana agar Anda tahu apa yang ada di dalam sintaks

{"city":"New York", "country":"United States "}

JSON selalu dibuka dan ditutup dengan {} atau kurung kurawal. Sintaksnya terdiri dari dua elemen, yaitu key dan value. Keduanya dipisahkan oleh titik dua untuk kejelasan

Contoh kunci adalah "kota", sedangkan "New York" adalah contoh nilai. Keduanya selalu dibuka dan ditutup dengan tanda kutip ganda. Perlu Anda ingat bahwa tidak ada ruang di antara kedua elemen tersebut

Jika ada lebih dari satu pasangan kunci dan nilai, Anda harus memisahkannya dengan koma diikuti dengan spasi. Anda dapat melihat ini pada contoh di atas

Nah, walaupun kuncinya harus berupa string, kamu bisa menggunakan beberapa jenis data sebagai nilainya. Apa itu?

Baca Juga. Cara Membuat JavaScript di HTML

Jenis Nilai JSON

Setidaknya ada enam jenis data yang bisa dijadikan nilai JSON, yaitu

• Rangkaian
• Obyek
• Himpunan
• Boolean
• Nomor
• Batal

Rangkaian

String adalah data yang terdiri dari karakter unicode, seperti “Anton” pada contoh di bawah ini

“nama”:”Anton”

Baca juga. JavaScript dan CSS khusus di WordPress

Obyek

Objek adalah sepasang kunci dan nilai. Seperti pada contoh sintaks tadi, objek dibuka dan ditutup dengan kurung kurawal. Jika ada lebih dari satu objek, masing-masing dipisahkan oleh koma dan spasi

“karyawan”: {“nama”:”Anton”, “asal”:”Bandung”}

Pada contoh di atas, semua yang ada di dalam tanda kurung adalah objek yang bernilai "karyawan"

Baca juga. Membuat Penghitung Waktu Mundur dengan JavaScript

Himpunan

Array adalah sekelompok objek. Grup ini dibuka dan ditutup dengan tanda kurung siku []

"karyawan":[      
{"nama":"Anton", "asal":"Bandung"},
{"nama":"Nana", "asal":"Surabaya"},
{"nama":"Jamal", "asal":"Tangerang"}
]

Baca juga. jQuery Apakah

Boolean

Boolean adalah tipe data yang hanya berisi pernyataan benar atau salah. Yang harus Anda lakukan adalah memasukkan benar atau salah, seperti pada contoh berikut

“karyawan tetap”:”false”

Baca juga. Kerangka JavaScript

Nomor

Seperti namanya, jenis data ini berupa angka saja. Perhatikan bahwa angka tersebut harus berupa bilangan bulat atau bilangan bulat. Artinya, 21,8 atau √2 tidak dapat digunakan sebagai nilai. Contoh penggunaannya seperti di bawah ini

“usia”:“29”

Baca juga. Apa itu DOM

Batal

Jika kunci tidak memiliki nilai, Anda dapat mengetik null. Misalnya seperti pada kode berikut

“golonganDarah”:”null”

Baca juga. Kenali Ekspres. js. Pengertian, Cara Kerja, Keunggulan, Tutorial

Membuat Objek Bersarang dan Array Bersarang

Anda dapat membuat objek bersarang dan array bersarang dalam kode JSON. Untuk memahami penggunaannya, perhatikan dua contoh yang dibahas di bagian ini

Pertama, mari kita lihat contoh objek bersarang berikut

“karyawan”: {
	“nama”:“Anton”,
	“asal”:“Bandung”.
	“hobi”: {
		“hobi1”:“berenang”,
		“hobi2”:“melukis”,
		“hobi3”:“jogging”
	}
}

Pada contoh, "hobi1", "hobi2", dan "hobi3" adalah nilai dari key "hobi". Perhatikan bahwa ketiga nilai tersebut berada dalam kurung kurawal. Jadi, "hobi" beserta ketiga nilainya adalah objek di dalam objek

Penggunaan nested array tidak jauh berbeda. Lihatlah contoh di bawah ini

{"users": [
  {"username" : "Anton", "lokasi" : "Bandung"},
  {"username" : "Budi", "lokasi" : "Semarang"},
  {"username" : "Nana", "lokasi" : "Surabaya"},
  {"username" : "Jamal", "lokasi" : "Tangerang"}
] }

Pada contoh di atas, “berenang”, “melukis”, dan “jogging” adalah larik yang merupakan nilai-nilai “hobby”

Mudah, bukan?

Baca Juga. Berikutnya. js. Arti, Cara Kerja, dan Tutorial Project Next. js

Siap Mencoba Menggunakan JSON?

JSON adalah format yang digunakan dalam penyimpanan dan transfer data, terutama dalam aplikasi web. Format ini semakin banyak digunakan karena struktur kodenya lebih sederhana dan mudah dipahami daripada XML

Nah, tadi kamu diajak untuk mengenal sintaks dasar, jenis-jenis value, serta cara menggunakan nested object dan array dengan JSON.

Kami harap artikel ini akan membantu Anda mempelajari JSON. Jika ada pertanyaan, jangan sungkan untuk meninggalkan komentar pada kolom yang tersedia di bawah artikel ini