DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial Lengkap Belajar Javascript # Mengenal json data

advertisement
Apa itu json data

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

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.
Mengenal json data

Cara membuat json

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 methode.
{"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
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.
Hal tersebut dapat kita lakukan dengan menggunakan syntax berikut
JSON.stringify(objek)
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 atau variabel primitif yang dikenali di hampir semua bahasa pemrograman.

Mengakses data json

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

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.

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 dependecy 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 string, number/integer dan boolean.
advertisement



0 Komentar untuk " Tutorial Lengkap Belajar Javascript # Mengenal json data"

Silahkan berkomentar dengan baik dan bijak!