Hallo gan, pada kesempatan kali ini kita akan membahas materi mengenai JSON.
JSON atau singkatan dari Javascript Object Notation, JSON sendiri biasa di gunakan sebagai media untuk transaksi data melalui Web API.
JSON merupakan format penulisan data yang sering digunakan karena penulisannya yang relatif mudah dan gampang di baca.
Meskipun namanya JavaScript Object Notation bukan berarti json hanya dapat digunakan oleh bahasa Javascript saja, JSON dapat dibaca dan di gunakan pada berbagai macam bahasa pemrograman.
Membuat file JSON
Lalu bagaimana cara menuliskan file JSON? Struktur JSON di bangun dalam dua literal data, yaitu objek dan array, perhatikan contoh penulisan data JSON dibawah ini.
{
"error"": false,
"messages": "success",
"guru": [
{
"id": "1",
"nama": "junaidi",
"mapel": "Olahraga",
},
{
"id": "2",
"nama": "Johan",
"mapel": "Bahasa inggris",
},
{
"id": "3",
"nama": "Kusnaidi",
"mapel": "Matematika",
},
{
"id": "4",
"nama": "asep",
"mapel": "Kalkulus",
},
{
"id": "5",
"nama": "Rojak",
"mapel": "Fisika",
},
],
};
Data objek pada JSON selalu diletakan di dalam kurun kurawal { }, dan data Array di letakan di dalam kurung siku [ ] , Penulisan ini hampir sama seperti membuat objek dan array pada JavaScript.
Perhatikan gambar diatas, JSON menggunakan key dan value untuk menampilkan datanya. dari gambar diatas kita dapat lihat "error" merupakan sebuah key dan false adalah valuenya, yang membedakan penulisan JSON dan objek pada JavaScript yaitu penulisan key pada JSON harus di tulis menggunakan tanda kutip ” ”.
Berikut ini perbedaan objek pada JavaScript dan JSON.
{
"error": false,
"messages": "success",
"guru": [
{
"id": "1",
"nama": "junaidi",
"mapel": "Olahraga"
},
{
"id": "2",
"nama": "Johan",
"mapel": "Bahasa inggris"
},
{
"id": "3",
"nama": "Kusnaidi",
"mapel": "Matematika"
},
{
"id": "4",
"nama": "asep",
"mapel": "Kalkulus"
},
{
"id": "5",
"nama": "Rojak",
"mapel": "Fisika"
}
]
};{
error: false,
messages: "success",
guru: [
{
id: "1",
nama: "junaidi",
mapel: "Olahraga",
},
{
id: "2",
nama: "Johan",
mapel: "Bahasa inggris",
},
{
id: "3",
nama: "Kusnaidi",
mapel: "Matematika",
},
{
id: "4",
nama: "asep",
mapel: "Kalkulus",
},
{
id: "5",
nama: "Rojak",
mapel: "Fisika",
},
],
};Didalam JSON kita dapat menggunakan bermacam tipe data pada valuenya, diantaranya:
- String
- Number
- Object
- Boolean
- Array
- Null
Cara menggunakan JSON pada JavaScript
Setelah kita memahami format dan cara penulisan JSON, kita akan belajar juga bagaimana menggunakan JSON di JavaScript. Untuk menggunakan JSON sama seperti menggunakan objek pada JavaScript, mari kita mulai memperaktekannya.
Pertama buatlah berkas dengan format .js disini saya menamakanya latihan1.js kemudian tuliskan kode di bawah ini
Note : cobalah untuk menuliskan secara manual tidak copas, agar materi dapat di pahami dengan baik.
const data = {
"error"": false,
"messages": "success",
"guru": [
{
"id": "1",
"nama": "junaidi",
"mapel": "Olahraga",
},
{
"id": "2",
"nama": "Johan",
"mapel": "Bahasa inggris",
},
{
"id": "3",
"nama": "Kusnaidi",
"mapel": "Matematika",
},
{
"id": "4",
"nama": "asep",
"mapel": "Kalkulus",
},
{
"id": "5",
"nama": "Rojak",
"mapel": "Fisika",
},
],
};
console.log(`error :${data.error}`);
console.log(`Status: ${data.messages}`);
data."guru".forEach((guru, index) => {
console.log(`${index + 1}. ${guru.nama}, Mapel : ${guru.mapel}`);
});
Kemudian jalankan menggunakan nodeJS atau runtime JavaScript lainnya, disini saya menggunakan deno.
Jika di jalankan maka outputnya seperti berikut:
Mari kita pahami kode diatas, Pertama kita membuat sebuah variabel data yang didalamnya terdapat objek JSON.
Lalu kita dapat mengakses objek tersebut menggunakan tanda titik setelah variabel yang menampung objek tersebut, pada kode diatas kita mengakses data dengan key "error" seperti berikut:
data."error";
Parse() dan Stringify()
JSON biasa di gunakan untuk transaksi data dari atau ke Web Server. Ketika transaksi berlangsung data yang dikirim ke server harus dalam bentuk string.
Untuk membuat data JSON menjadi string kita dapat menggunakan parse dengan menggunkana object global JSON. didalam objek global JSON terdapat dua method penting yaitu, parse() dan stringify().
JSON.parse() dapat digunakan untuk mengubah data dari string manjadi Objek JavaScript. Perhatikan contoh kode berikut:
const data = ` {
"error": false,
"messages": "success",
"guru": [
{
"id": "1",
"nama": "junaidi",
"mapel": "Olahraga"
},
{
"id": "2",
"nama": "Johan",
"mapel": "Bahasa inggris"
},
{
"id": "3",
"nama": "Kusnaidi",
"mapel": "Matematika"
},
{
"id": "4",
"nama": "asep",
"mapel": "Kalkulus"
},
{
"id": "5",
"nama": "Rojak",
"mapel": "Fisika"
}
]
}`;
const parsejson = JSON.parse(data);
console.log(parsejson);
/*
Output:
{
error: false,
messages: "success",
guru: [
{ id: "1", nama: "junaidi", mapel: "Olahraga" },
{ id: "2", nama: "Johan", mapel: "Bahasa inggris" },
{ id: "3", nama: "Kusnaidi", mapel: "Matematika" },
{ id: "4", nama: "asep", mapel: "Kalkulus" },
{ id: "5", nama: "Rojak", mapel: "Fisika" }
]
}
*/
Output dari JSON.parse akan berupa object JavaScript, sedangkan Method JSON.stringfy() memiliki fungsi yang sebaliknya, yaitu mengubah objek JSON menjadi string, perhatikan contoh kode berikut.
const data = {
"error"": false,
"messages": "success",
"guru": [
{
"id": "1",
"nama": "junaidi",
"mapel": "Olahraga",
},
{
"id": "2",
"nama": "Johan",
"mapel": "Bahasa inggris",
},
{
"id": "3",
"nama": "Kusnaidi",
"mapel": "Matematika",
},
{
"id": "4",
"nama": "asep",
"mapel": "Kalkulus",
},
{
"id": "5",
"nama": "Rojak",
"mapel": "Fisika",
},
],
};
const stringifyjson = JSON.stringify(data);
console.log(stringifyjson);
/*
Output:
{
{"error":false,"messages":"success","guru":[{"id":"1","nama":"junaidi","mapel":"Olahraga"},{"id":"2","nama":"Johan","mapel":"Bahasa inggris"},{"id":"3","nama":"Kusnaidi","mapel":"Matematika"},{"id":"4","nama":"asep","mapel":"Kalkulus"},{"id":"5","nama":"Rojak","mapel":"Fisika"}]}
*/
Mungkin sekian dulu artikel kali ini, silahkan dipraktekan dan semoga bermanfaat terimakasih ❤️