Cara menggunakan JSONKEY pada JavaScript

As Luke notes in the comments,

the logic for whether or not to render should live in render

Mechanics of this have since been covered by other answers here, so I won't go through it all.

A few other points:

You're trying to use an arrow function to define the standard React function componentDidMount, and based on a quick local test, I don't think React can understand that. It doesn't look like you're getting any particular benefit from it over the traditional componentDidMount() { /* do stuff here */ } syntax, so I'd switch to the latter.

You're trying to check on whether your JSON contains the key with

typeof props.workItemData.workExamples === "undefined"

but I don't see a need for the typeof; you can just check for the presence of the key directly:

if(props.workItemData.workExamples) { /* do stuff */ }

Finally, in your HTML, the line

<a href={props.workItemData.workExamples}>Work Examples</a>

is attempting to set the value of href with a value from JavaScript (the stuff in the curly braces). That's valid for JSX, which makes sense since you're using React, but not in pure HTML. But since the page is loading and just not handling a certain part of the logic correctly, I'm assuming you just meant the HTML-like stuff inside your JSX (a something.js file) and not literally an HTML file.

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

Nah, di artikel ini, Anda tidak hanya diajak untuk memahami pengertiannya saja. Anda juga akan belajar tentang fungsi, syntax, dan cara menggunakannya. Yuk, simak bersama!

Apa Itu JSON?

Seperti yang tadi disebutkan, JavaScript object notation atau JSON adalah format yang digunakan untuk menyimpan dan mentransfer data.

Berbeda dengan XML (extensive markup language) dan format lainnya yang memiliki fungsi serupa, JSON memiliki struktur data yang sederhana dan mudah dipahami. Itulah mengapa JSON sering digunakan pada API.

JSON sendiri terdiri dari dua struktur, yaitu:

  • Kumpulan value yang saling berpasangan. Dalam JSON, contohnya adalah object. 
  • Daftar value yang berurutan, seperti array.

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

  • PHP
  • Python
  • Ruby
  • C++
  • Perl

Baca Juga: 15+ Bahasa Pemrograman yang Wajib Dipelajari Developer

Fungsi JSON

Fungsi JSON kurang lebih sama dengan XML. Sebelum JSON diciptakan, format bahasa markup ini sering digunakan dengan JavaScript dalam AJAX (asynchronous JavaScript and XML) untuk penyimpanan dan perpindahan data.

Berkat gabungan keduanya, developer dapat membuat halaman website di mana informasinya dapat diperbarui tanpa harus memuat ulang halaman tersebut. Ini sudah menjadi hal yang umum, terutama dengan menjamurnya tren aplikasi web.

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

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

Agar Anda paham dengan ketiga keunggulan tersebut, mari simak contoh yang ada di poin berikutnya.

Perbandingan JSON dan XML

Seberapa sederhanakah kode JSON jika dibandingkan dengan kode XML? Untuk mengetahuinya, Anda dapat memperhatikan kedua contoh di bawah ini. 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, berikut ini adalah contoh kode JSON.

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

Dapat Anda lihat bahwa kode JSON lebih ringkas karena tidak memerlukan tag pembuka dan penutup. Dengan demikian, kodenya juga lebih mudah dipahami. Di samping itu, kelebihan ini juga memberikan dua manfaat lainnya, yaitu:

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

Baca Juga: Cara Install Node.js dan NPM di Ubuntu 18.04

Cara Menggunakan JSON

Ada dua hal yang perlu Anda pelajari agar dapat menggunakan JSON, yaitu syntax (cara penulisan) dan jenis value-nya. Untuk memahami keduanya, simak penjelasan di bawah ini. 

Syntax JSON

Pada contoh di bagian sebelumnya memang menunjukkan bahwa JSON memiliki struktur kode yang sederhana. Namun, mari lihat contoh yang lebih simpel lagi agar Anda tahu apa saja yang ada dalam syntax-nya:

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

JSON selalu dibuka dan ditutup dengan tanda {} atau kurung kurawal. Syntax-nya terdiri dari dua elemen, yaitu  key dan value. Keduanya dipisahkan oleh titik dua agar jelas.

Contoh key adalah “city”, sedangkan “New York” adalah contoh value. Keduanya selalu dibuka dan ditutup dengan tanda kutip ganda. Perlu Anda ingat bahwa kedua tidak ada spasi di antara kedua elemen tersebut.

Apabila ada lebih dari satu pasang key dan value, Anda perlu memisahkannya dengan tanda koma yang diikuti spasi. Ini dapat Anda lihat pada contoh di atas.

Nah, meskipun key harus berupa string, Anda dapat menggunakan beberapa jenis data sebagai value-nya. Apa saja itu? Mari kita bahas di bagian selanjutnya.

Jenis-Jenis Value JSON

Setidaknya ada enam jenis data yang dapat digunakan sebagai value JSON, yaitu:

  • String
  • Object
  • Array
  • Boolean
  • Number
  • Null

String

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

“nama”:”Anton”

Object

Object adalah sepasang key dan value. Seperti pada contoh syntax tadi, object dibuka dan ditutup dengan kurung kurawal. Jika ada lebih dari satu object, masing-masing dipisahkan oleh koma dan spasi.

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

Pada contoh di atas, semua yang ada di dalam kurung kurawal adalah object yang merupakan value dari “karyawan”.

Array

Array adalah kumpulan object. Kumpulan ini dibuka dan ditutup dengan kurung siku [].

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

Boolean

Boolean adalah jenis data yang hanya berisikan pernyataan benar atau salah. Anda hanya tinggal memasukkan true atau false, seperti pada contoh berikut ini:

“karyawan tetap”:”false”

Number

Seperti namanya, jenis data ini berupa angka saja. Dengan catatan, angkanya harus merupakan integer atau angka bulat. Artinya, 21,8 atau √2 tidak dapat dijadikan sebagai value . Contoh penggunaannya seperti di bawah ini:

“usia”:“29”

Null

Jika sebuah key tidak memiliki value, Anda dapat mengetikkan null. Contohnya seperti pada kode berikut:

“golonganDarah”:”null”

Baca juga: Mengenal Express.js: Pengertian, Cara Kerja, Keunggulan, Tutorial

Membuat Nested Objects dan Nested Arrays

Anda dapat membuat nested object dan nested array dalam kode JSON. Untuk memahami penggunaannya, amati kedua contoh yang dibahas pada bagian ini.

Pertama, mari perhatikan contoh nested object berikut:

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

Pada contoh tersebut, “hobi1”, “hobi2”, dan “hobi3” merupakan value dari key “hobi”. Perhatikan bahwa ketiga value tersebut ada di dalam kurung kurawal. Dengan demikian, “hobi” beserta ketiga value-nya merupakan object di dalam object.

Penggunaan nested array tidak jauh berbeda. Perhatikan contoh di bawah ini:

“karyawan”: {
	“nama”:“Anton”,
	“asal”:“Bandung”.
	“hobi”: [ “berenang”, “melukis”, “jogging” ]
}

Pada contoh di atas, “berenang”, “melukis”, dan “jogging adalah array yang merupakan value dari “hobi”.

Mudah, bukan?

Baca Juga : Next.js: Pengertian, 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 makin sering digunakan karena struktur kode yang lebih ringkas dan mudah dipahami daripada XML.

Nah, tadi Anda telah diajak untuk mengenali syntax dasar, jenis-jenis value, serta cara menggunakan nested object dan array dengan JSON.

Kami harap artikel ini dapat membantu Anda untuk belajar JSON. Apabila ada pertanyaan, jangan sungkan untuk meninggalkan komentar pada kolom yang tersedia di bawah artikel ini.

Kapan JSON digunakan?

Format JSON sering digunakan untuk mentransmisikan data terstruktur melalui suatu koneksi jaringan pada suatu proses yang disebut serialisasi. Aplikasi utamanya adalah pada pemrograman aplikasi web AJAX dengan berperan sebagai alternatif terhadap penggunaan tradisional format XML.

Apa itu JSON JS?

JSON (JavaScript Object Notation) adalah format pertukaran data yang ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript, Standar ECMA-262 Edisi ke-3 - Desember 1999.

Apa itu JSON dan contohnya?

JSON (JavaScript Object Notation) adalah sebuah format untuk menyimpan dan menukar informasi yang dapat dibaca oleh manusia. Filenya hanya memuat teks dan berekstensikan .json. Pada artikel ini, Anda akan mempelajari tentang apa itu JSON, kegunaannya, dan juga bagaimana JSON dapat meningkatkan performa website Anda.

Apa kepanjangan dari JSON?

Saat ini pengunaan JSON dalam dunia web development sudah merupakan hal yang biasa bahkan menjadi standar dalam pertukaran data di web development. Dilihat dari kepanjangan JSON yaitu JavaScript Object Notation, JSON sebenarnya diturunkan dari bahasa pemrograman Java Script, akan tetapi format ini tersedia bagi banyak ...