Cara menggunakan JSONV pada JavaScript

Ketika kita hendak membangun sebuah sistem yang saling terintegrasi satu sama lain ini akan mudah jika kita membangunnya di satu bahasa pemrograman yang sama sehingga tipe data yang digunakan dapat dikenali.
Namun bagaimana jika bahasa yang digunakan berbeda-beda, tentu ini akan jadi masalah di sisi pertukaran data. 
Disinilah diperlukan sebuah format data yang di kenali di setiap bahasa pemrograman untuk mengatasi masalah tersebut.
Javascript memiliki sebuh format data yang bisa diimplementasi di semua bahasa pemrograman yang di kenal sebagai JSON.

Lebih jelasnya kita langsung saja ke tutorialnya,

Daftar Isi

• Apa itu json?
• Cara membuat json di javascript
• Mengkonversi json ke dalam objek javascript
• Mengakses data json di javascript
• Mengganti nilai dari properti json di javascript

advertisement

Apa itu json?

Json atau javascript object nonation adalah sebuah format data yang banyak digunakan untuk membangun sebuah sistem terintegrasi. Json digunakan untuk membuat Rest Api atau jembatan antara client dengan server. Namun lebih dari pada itu, json juga di gunakan untuk format penyimpanan data seperti pada mongodb, format data firebase, configurasi pada composer dan lain sebagainya.

Json memilki struktur sama seperti objek pada javascript namun tidak memilikiatibut  fungsi atau methode, hanya ada properti saja.

Cara membuat json di javascript

Membuat json sama seperti ketika kita membuat objek di javascript, hanya saja pada nama properti kita membungkusnya menggunakan tanda "" dan pada json tidak ada yang namanya method.

{"domain":"deretcode.com","topik":"tutorial pemrograman"}

Contoh di atas hanya menampung satu blok data.
Bagaimana jika kita ingin membuat blok data kedua didalam json?
Caranya cukup membuat mengganti value dengan data json kedua dan seterusnya.

{
  "domain" : "deretcode.com",
  "topik" : "tutorial pemrograman",
  "artikel" : {
     "html" : "https:deretcode.com/html",
     "css" : "https:deretcode.com/css",
     "javascript" : "https:deretcode.com/javascript",
  }
}

Bagaimana jika datanya berupa list?
Caranya tinggal kita bungkus data listnya menggunakan tanda [] , seperti ketika kita membuat data array.
Contoh kodenya seperti berikut,

{
  "domain" : "deretcode.com",
  "topik" : "tutorial pemrograman",
  "artikel" : [
    {"judul":"belajar html","link":"https://deretcode.com/html"},
    {"judul":"belajar css","link":"https://deretcode.com/css"},
    {"judul":"belajar javascript","link":"https://deretcode.com/javascript"}
  ]
}

Mengkonversi json ke dalam objek javascript

Sebenarnya json yang akan kita olah bertipe string dengan format serpeti objek javascript. Oleh karena itu kita tidak bisa langsung mengambil nilai-nilai yang ada didalamnya atau merubah nilai-nilai tersebut secara langsung sebelum menguraikannya ke dalam bentuk objek. 

jsonString= '{"domain" : "deretcode.com","topik" : "tutorial pemrograman"}';// jsonString

Untuk menguraikan atau istilah popularnya memparsing json, kita bisa menggunakan syntax

JSON.Parse(jsonString)

Contoh kodenya seperti berikut,

var jsonString = '{"domain" : "deretcode.com","topik" : "tutorial pemrograman"}';
obj = JSON.parse(jsonString);
document.write(obj.domain);
/*Hasilnya
----------------
deretcode.com
---------------*/

Lalu bagaimana jika kita ingin melakukan hal sebaliknya yaitu mengubah objek javascript ke json.

advertisement

Hal tersebut dapat kita lakukan dengan menggunakan syntax berikut

JSON.stringify(objek)

Dan berikut contoh kodenya,

var obj = {domain : "deretcode.com",topik : "tutorial pemrograman"};
json = JSON.stringify(obj);
document.write(json);
/*Hasilnya
----------------
{"domain":"deretcode.com","topik":"tutorial pemrograman"}
---------------*/

Ko harus di parsing segala?

Karena jika bentuknya objek dari javascript, ini tidak akan bisa digunakan untuk pertukaran data dengan bahasa pemrograman lainnya atau antara server dengan client karena objek javascript tidak di kenali di bahasa pemrograman lain.

Sedangkan string adalah data primitif yang dikenali di hampir semua bahasa pemrograman.

Mengakses data json di javascript

Untuk mengampil atau mengakses nilai dari properti json kita tidak bisa langusng mengambilnya seperti pada objek, melainkan harus memparsingnya terlebih dahulu ke bentuk objek javascript.

Contoh kodenya seperti berikut,

jsonString= '{"domain" : "deretcode.com","topik" : "tutorial pemrograman"}';
console.log(JSON.parse(jsonString).domain);
/*Hasilnya
----------------
deretcode.com
---------------*/

Jika datanya berupa list (Json Array) maka kita bisa menggunakan fungsi perulangan foreach atau for in.
Contoh kodenya seperti berikut,

var json ='{"domain" : "deretcode.com","topik" : "tutorial pemrograman","artikel" : [{"judul":"belajar html","link":"https://deretcode.com/html"},{"judul":"belajar css","link":"https://deretcode.com/css"},{"judul":"belajar javascript","link":"https://deretcode.com/javascript"}]}';
var domain = JSON.parse(json).domain;
document.write(domain +"<br/>");
document.write("<br/>");
for( i in json.artikel)
{
  document.write(json.artikel[i].judul +"<br/>");
}
/*Hasilnya
----------------
deretcode.com

belajar html
belajar css
belajar javascript
---------------*/

Mengganti nilai dari properti json di javascript

Sama seperti ketika kita mengakses nilai properti json, mengganti nilai dari properti json juga perlu mengparsingnya terlebih dahulu ke bentuk objek javascript.

Contohnya seperti berikut,

var json = '{"domain" : "deretcode.com","topik" : "tutorial pemrograman"}'
var obj = JSON.parse(json);
obj.domain = "www.deretcode.com";
document.write(JSON.stringify(obj));
/*Hasilnya
----------------
{"domain":"www.deretcode.com","topik":"tutorial pemrograman"}
---------------*/

Sampai disini tutorial apa itu json. Untuk lebih jelas mengenai fungsi dan penggunaan json, kita akan lanjutkan di pembahasan ajax.

advertisement

Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share.
Jika ada pertanyaan atau ada hal yang ingin di sampaikan silahkan tulis di kolom komentar.

Good Luck!

Pernjelasan:

1. Mongodb adalah salah satu database nosql dengan format penyimpanan data berupa document dengan tipe json.
2. Firebase adalah salah satu flatform yang dikembangkan oleh google untuk menangani aplikasi realtime
3. Composer adalah tools pada php yang akan memudahkan programmer dalam mengelola library php.
4. Data primitif adalah tipe data yang paling mendasar yang bisa kita temukan di hampir semua bahasa pemrograman seperti data string, number/integer dan boolean.