1️⃣ Apa Itu JSON?
JSON adalah singkatan dari: JavaScript Object Notation
JSON adalah format pertukaran data yang ringan dan mudah dibaca manusia.
{
"nama": "Andi",
"kelas": "X RPL 1",
"umur": 15
}
JSON mirip object di JavaScript
Bedanya:
JSON harus pakai tanda petik dua " "
Tidak boleh ada function
Tidak boleh ada koma terakhir
2️⃣ Struktur Dasar JSON, Object JSON
{
"nama": "Budi",
"kelas": "X RPL 2"
}
Penjelasan:
{} = object
"nama" = key
"Budi" = value
Array JSON
[
{
"nama": "Andi",
"kelas": "X RPL 1"
},
{
"nama": "Budi",
"kelas": "X RPL 2"
}
]
Jelaskan:
[] = array
Bisa berisi banyak object
------------
3️⃣ JSON di JavaScript
// Object JavaScript
let siswa = {
nama: "Andi",
kelas: "X RPL 1",
umur: 15
};
console.log(siswa.nama);
// Mengubah Object ke JSON
let dataJSON = JSON.stringify(siswa);
console.log(dataJSON);
Penjelasan:
JSON.stringify() = mengubah object jadi string JSON
// Mengubah JSON ke Object
let dataObject = JSON.parse(dataJSON);
console.log(dataObject.nama);
Penjelasan:
JSON.parse() = mengubah string JSON jadi object
🎯 Tujuan Mengubah JSON ↔ Object
1️⃣ Mengubah Object → JSON
(JSON.stringify())
✅ Tujuannya:
Agar data bisa dikirim atau disimpan
Karena:
Object JavaScript hanya bisa digunakan di dalam program
Untuk dikirim ke server / disimpan ke file / database → harus dalam bentuk string
// 📦 Contoh Kasus Nyata
// Misalnya kita ingin kirim data ke server:
let siswa = {
nama: "Andi",
kelas: "X RPL 1"
};
let dataJSON = JSON.stringify(siswa);
Kenapa diubah jadi JSON?
Karena:
HTTP hanya bisa mengirim data dalam bentuk teks
File .json hanya menyimpan teks
LocalStorage hanya menyimpan string
Jadi object → diubah jadi string JSON dulu.
2️⃣ Mengubah JSON → Object
(JSON.parse())
✅ Tujuannya:
Agar data bisa digunakan dan diolah di dalam program
Karena:
JSON itu hanya string
String tidak bisa langsung diakses seperti object
// Misalnya kita menerima data dari server:
let data = '{"nama":"Andi","kelas":"X RPL 1"}';
// Kalau langsung pakai:
console.log(data.nama); // ❌ error
// Karena itu masih string.
// Maka harus diubah dulu:
let siswa = JSON.parse(data);
console.log(siswa.nama); // ✅ Andi
Contoh project sederhana :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Data Json</h1>
<p id="output"></p>
<script src="api.js"></script>
</body>
</html>
[
{
"nama" : "timoty",
"kelas" : 10,
"jurusan" : "rpl"
},
{
"nama" : "raymond",
"kelas" : 10,
"jurusan" : "rpl"
},
{
"nama" : "felicia",
"kelas" : 10,
"jurusan" : "rpl"
}
]
fetch("data.json")
.then(response => response.json())
.then(data => {
let hasil = "";
for (let i = 0; i < data.length; i++) {
hasil += `
<p>
Nama: ${data[i].nama} <br>
Kelas: ${data[i].kelas} <br>
Umur: ${data[i].jurusan}
</p>
<hr>
`;
}
document.getElementById("output").innerHTML = hasil;
})
.catch(error => {
console.log("Terjadi kesalahan:", error);
});
