Pengenalan JSON di JavaScript: Parse dan Stringify

JSON (JavaScript Object Notation) adalah format pertukaran data ringan yang mudah dibaca dan ditulis oleh manusia, serta mudah diproses oleh mesin.

Di dunia web modern, JSON menjadi standar komunikasi antara client dan server, karena:

Mudah dipahami dan ditulis secara manual
Kompatibel dengan hampir semua bahasa pemrograman
Memiliki struktur yang sederhana: key-value
Mendukung array dan nested object

Belajar JSON sangat penting bagi developer JavaScript karena data dari API, server, atau localStorage sering berbentuk JSON. Dengan memahami JSON, kita bisa serialisasi (ubah objek jadi string) dan deserialisasi (ubah JSON jadi objek) secara efisien.

Daftar isi

Pengertian & Dasar-Dasar JSON di JavaScript
Cara Mengubah Objek JavaScript menjadi JSON (JSON.stringify)
Mengubah JSON Menjadi Objek JavaScript (JSON.parse)
Validasi dan Manipulasi Data JSON di JavaScript
JSON di API & Pertukaran Data
Kesimpulan

Pengertian & Dasar-Dasar JSON di JavaScript

Di tahap awala ini, kita akan membahas hal-hal yang mendasar terlebih dahulu yaitu pengertian JSON dan dasar-dasar JSON di JavaScript.

1. Pengertian JSON

JSON adalah representasi data berbasis text yang mengikuti aturan:

Data tersusun dalam key-value pair
Key harus berupa string dengan tanda kutip ganda
Value bisa berupa string, number, boolean, null, array, atau object

Contoh JSON sederhana:

{
    "nama": "Aris Munandar",
    "umur": 30,
    "aktif": true,
    "hobi": ["coding", "membaca", "travel"],
    "alamat": {
        "kota": "Jakarta",
        "negara": "Indonesia"
    }
}Code language: JSON / JSON with Comments (json)

JSON terlihat mirip dengan objek JavaScript, tapi key selalu string dan tidak bisa menyimpan fungsi atau simbol.

2. Kenapa JSON Penting dalam Pengembangan Web

JSON digunakan luas dalam web karena:

Pertukaran data API: JSON menjadi format default saat fetch atau AJAX.
Penyimpanan lokal: data disimpan di localStorage atau sessionStorage dalam bentuk string JSON.
Interoperabilitas: JSON dapat dibaca oleh berbagai bahasa, misal Python, Java, PHP, dan lain-lain.
Mudah debugging: formatnya human-readable dan mudah divalidasi.

3. Perbedaan JSON vs Objek JavaScript

JSON dan objek JavaScript memiliki perbedaan penting:

Aspek	JSON	Objek JavaScript
Format	Text (string)	Struktur data native
Key	Harus string	Bisa string, symbol, atau number
Value	string, number, boolean, null, array, object	string, number, boolean, null, array, object, function, symbol
Fungsi	Tidak menyimpan fungsi atau metode	Bisa menyimpan fungsi dan metode
Penggunaan	Pertukaran data, API, penyimpanan	Manipulasi data langsung di JS

JSON adalah representasi string dari data, sedangkan objek JavaScript adalah struktur data langsung yang bisa dioperasikan di program.

4. Serialisasi dan Deserialisasi Data

Serialisasi → Mengubah objek JavaScript menjadi string JSON menggunakan JSON.stringify()
Deserialisasi → Mengubah string JSON menjadi objek JavaScript menggunakan JSON.parse()

Contoh sederhana:

let user = {
    nama: "Aris",
    umur: 30
};

// Serialisasi
let jsonString = JSON.stringify(user);
console.log(jsonString); // '{"nama":"Aris","umur":30}'

// Deserialisasi
let userObj = JSON.parse(jsonString);
console.log(userObj.nama); // "Aris"Code language: JavaScript (javascript)

Serialisasi dan deserialisasi memungkinkan mengirim dan menerima data antar server dan client dengan aman.

5. Contoh JSON Sederhana

// JSON sebagai string
let jsonData = '{"produk":"Laptop","harga":15000000,"stok":25,"tersedia":true}';

// Mengubah JSON menjadi objek JavaScript
let produkObj = JSON.parse(jsonData);

console.log(produkObj.produk); // "Laptop"
console.log(produkObj.harga);  // 15000000Code language: JavaScript (javascript)

Cara Mengubah Objek JavaScript menjadi JSON (`JSON.stringify`)

JSON.stringify() adalah metode di JavaScript yang digunakan untuk mengubah objek JavaScript menjadi string JSON.

Alasan menggunakan JSON.stringify():

Mengirim data objek ke server melalui AJAX atau Fetch API
Menyimpan data di localStorage atau sessionStorage
Menyimpan snapshot data dalam format yang aman dan kompatibel

Metode ini juga mendukung parameter opsional untuk memformat JSON agar lebih mudah dibaca, atau menentukan properti tertentu yang ingin disertakan.

1. Sintaks Dasar dan Parameter Opsional

Sintaks:

JSON.stringify(value, replacer, space)Code language: JavaScript (javascript)

value → objek atau array yang ingin diubah menjadi JSON
replacer → fungsi atau array yang memilih properti yang akan disertakan (opsional)
space → string atau number untuk indentation (opsional)

Contoh sederhana:

let user = {
    nama: "Aris",
    umur: 30,
    aktif: true
};

let jsonString = JSON.stringify(user);
console.log(jsonString); // '{"nama":"Aris","umur":30,"aktif":true}'Code language: JavaScript (javascript)

2. Menangani Objek, Array, dan Nested Object

Objek Sederhana

let obj = {a: 1, b: 2};
console.log(JSON.stringify(obj)); // '{"a":1,"b":2}'Code language: JavaScript (javascript)

Array

let arr = [10, 20, 30];
console.log(JSON.stringify(arr)); // '[10,20,30]'Code language: JavaScript (javascript)

Nested Object

let nested = {
    nama: "Aris",
    alamat: { kota: "Jakarta", negara: "Indonesia" }
};

console.log(JSON.stringify(nested)); 
// '{"nama":"Aris","alamat":{"kota":"Jakarta","negara":"Indonesia"}}'Code language: JavaScript (javascript)

JSON.stringify() secara otomatis menangani nested object dan array.

3. Formatting dan Indentation JSON

Untuk membuat JSON lebih mudah dibaca, gunakan parameter space:

let user = {
    nama: "Aris",
    umur: 30,
    hobi: ["coding", "membaca"]
};

let jsonPretty = JSON.stringify(user, null, 4); // 4 spasi indentation
console.log(jsonPretty);Code language: JavaScript (javascript)

Hasilnya:

{
    "nama": "Aris",
    "umur": 30,
    "hobi": [
        "coding",
        "membaca"
    ]
}Code language: JSON / JSON with Comments (json)

Berguna untuk debugging atau menyimpan JSON yang mudah dibaca manusia.

4. Contoh Penggunaan Step-by-Step

let produk = {
    nama: "Laptop",
    harga: 15000000,
    spesifikasi: {
        ram: "16GB",
        storage: "512GB SSD"
    },
    tersedia: true
};

// 1. Konversi objek ke JSON string
let jsonProduk = JSON.stringify(produk);

// 2. Kirim ke server atau simpan
console.log(jsonProduk);

// 3. Format JSON agar mudah dibaca
let jsonPretty = JSON.stringify(produk, null, 2);
console.log(jsonPretty);Code language: JavaScript (javascript)

Langkah-langkah ini menunjukkan alur lengkap dari objek JS → JSON → penyimpanan / pengiriman.

Mengubah JSON Menjadi Objek JavaScript (`JSON.parse`)

JSON.parse() adalah metode di JavaScript yang digunakan untuk mengubah string JSON menjadi objek JavaScript.

Penggunaan utama:

Mengambil response JSON dari server dan menggunakannya dalam kode JS
Membaca data yang tersimpan di localStorage
Memungkinkan manipulasi data secara langsung setelah deserialisasi

Selain itu, JSON.parse() dapat menerima callback reviver untuk melakukan transformasi pada nilai saat parsing.

1. Sintaks Dasar dan Callback Reviver

Sintaks dasar:

JSON.parse(text[, reviver])Code language: CSS (css)

text → string JSON yang valid
reviver → fungsi opsional yang dapat memodifikasi setiap pasangan key-value selama parsing

Contoh reviver:

let jsonString = '{"nama":"Aris","umur":"30"}';

let obj = JSON.parse(jsonString, (key, value) => {
    if (key === "umur") return Number(value); // konversi string ke number
    return value;
});

console.log(obj); // { nama: "Aris", umur: 30 }Code language: JavaScript (javascript)

2. Menangani String JSON yang Valid

JSON yang valid harus memenuhi aturan:

Key berupa string dengan tanda kutip ganda
Value berupa string, number, boolean, null, array, atau object
Tidak boleh ada fungsi atau symbol

Contoh valid JSON:

let jsonData = '{"produk":"Laptop","harga":15000000,"stok":25}';
let obj = JSON.parse(jsonData);

console.log(obj.produk); // "Laptop"
console.log(obj.harga);  // 15000000Code language: JavaScript (javascript)

3. Penanganan Error dan Validasi JSON

Jika JSON tidak valid, JSON.parse() akan melempar SyntaxError.

Tips aman:

Validasi JSON sebelum parsing
Cek error menggunakan try-catch
Pastikan JSON valid sebelum parsing

let jsonData = '{"produk":"Laptop", "harga":15000000'; // JSON tidak lengkap

try {
    let obj = JSON.parse(jsonData);
} catch (error) {
    console.error("JSON tidak valid:", error.message);
}Code language: JavaScript (javascript)

Gunakan try-catch untuk menangani error parsing
Bisa juga menggunakan fungsi validasi eksternal sebelum parse

4. Contoh Penggunaan Praktis

Parsing dari localStorage

localStorage.setItem("user", '{"nama":"Aris","umur":30}');
let userData = JSON.parse(localStorage.getItem("user"));
console.log(userData.nama); // "Aris"Code language: JavaScript (javascript)

Parsing response dari Fetch API

fetch("https://api.example.com/data")
    .then(res => res.json()) // internal JSON.parse
    .then(data => {
        console.log(data);
    })
    .catch(err => console.error("Error parsing JSON:", err));Code language: JavaScript (javascript)

Menggunakan reviver untuk transformasi nilai

let jsonString = '{"tanggal":"2025-11-21T10:00:00Z"}';

let obj = JSON.parse(jsonString, (key, value) => {
    if (key === "tanggal") return new Date(value); // ubah string menjadi Date object
    return value;
});

console.log(obj.tanggal instanceof Date); // trueCode language: JavaScript (javascript)

Dengan JSON.parse(), kita dapat mengubah data JSON menjadi objek yang siap digunakan di JavaScript, termasuk transformasi nilai saat parsing.

Validasi dan Manipulasi Data JSON di JavaScript

Setelah mempelajari cara parse JSON dan stringify objek, langkah berikutnya adalah validasi dan manipulasi data JSON.

Validasi diperlukan agar program tidak error saat parsing atau memproses JSON
Manipulasi data memungkinkan kita menambah, mengubah, atau menghapus properti sesuai kebutuhan aplikasi

Manipulasi JSON biasanya dilakukan setelah parsing menjadi objek JavaScript, karena string JSON tidak bisa langsung diubah.

1. Cara Memeriksa JSON Valid atau Tidak

Gunakan try-catch untuk memeriksa validitas JSON:

function isValidJSON(str) {
    try {
        JSON.parse(str);
        return true;
    } catch (e) {
        return false;
    }
}

let jsonData = '{"nama":"Aris","umur":30}';
console.log(isValidJSON(jsonData)); // true

let invalidData = '{"nama":"Aris","umur":30';
console.log(isValidJSON(invalidData)); // falseCode language: JavaScript (javascript)

Validasi ini penting sebelum memanipulasi data atau menyimpannya.

2. Mengubah, Menambah, dan Menghapus Properti dalam JSON

Setelah parsing:

let userJSON = '{"nama":"Aris","umur":30}';
let user = JSON.parse(userJSON);

// Mengubah properti
user.umur = 31;

// Menambah properti baru
user.hobi = ["coding", "travel"];

// Menghapus properti
delete user.nama;

console.log(user); // { umur: 31, hobi: ["coding", "travel"] }Code language: JavaScript (javascript)

Semua perubahan dilakukan pada objek JS, kemudian bisa diubah kembali menjadi JSON dengan JSON.stringify().

3. Mengakses Data Nested

Untuk JSON dengan struktur nested:

let data = '{"nama":"Aris","alamat":{"kota":"Jakarta","negara":"Indonesia"}}';
let obj = JSON.parse(data);

console.log(obj.alamat.kota); // "Jakarta"
console.log(obj.alamat.negara); // "Indonesia"

// Menambahkan properti nested
obj.alamat.kodePos = 12345;
console.log(obj.alamat);Code language: JavaScript (javascript)

Penting untuk memahami akses dot notation atau bracket notation untuk nested object.

4. Tips Aman Memanipulasi JSON

Selalu validasi JSON sebelum parsing
Gunakan try-catch saat parse untuk mencegah crash aplikasi
Perbarui objek JS, jangan ubah string JSON langsung
Serialize kembali ke JSON hanya ketika perlu menyimpan atau mengirim data
Hati-hati dengan nested object agar tidak menimpa data secara tidak sengaja

5. Contoh Studi Kasus: Update Data User

let usersJSON = `[
    {"id":1,"nama":"Aris","umur":30},
    {"id":2,"nama":"Budi","umur":25}
]`;

// Parse JSON menjadi array objek
let users = JSON.parse(usersJSON);

// Update umur user dengan id = 2
users.forEach(user => {
    if (user.id === 2) {
        user.umur = 26;
    }
});

// Tambah user baru
users.push({id:3, nama:"Citra", umur:22});

// Hapus user dengan id = 1
users = users.filter(user => user.id !== 1);

// Serialize kembali menjadi JSON
let updatedJSON = JSON.stringify(users, null, 2);
console.log(updatedJSON);Code language: JavaScript (javascript)

Contoh ini menunjukkan alur lengkap: parse → manipulasi → stringify → simpan atau kirim, cocok untuk aplikasi web yang mengelola data user.

JSON di API & Pertukaran Data

Di dunia web modern, JSON menjadi format standar untuk pertukaran data antara client (browser) dan server.

JSON ringan, mudah dibaca, dan kompatibel dengan banyak bahasa pemrograman.
Menggunakan JSON memudahkan fetch data, mengirim data ke API, dan menyimpan data di localStorage.
JavaScript menyediakan metode fetch(), yang secara langsung dapat menangani JSON response dengan mudah.

1. JSON sebagai Format Standar Komunikasi API

Hampir semua REST API menggunakan JSON untuk request dan response.

JSON mempermudah interoperabilitas karena client dan server tidak perlu menggunakan format khusus.

Contoh response API JSON:

{
    "status": "success",
    "data": {
        "id": 1,
        "nama": "Aris",
        "umur": 30
    }
}Code language: JSON / JSON with Comments (json)

2. Fetch API dan JSON

Mengambil data JSON dari server menggunakan Fetch API:

fetch('https://api.example.com/user/1')
    .then(response => response.json()) // JSON.parse otomatis
    .then(data => {
        console.log(data);
    })
    .catch(error => console.error('Error:', error));Code language: JavaScript (javascript)

Metode response.json() secara otomatis mengubah string JSON menjadi objek JavaScript.

3. Mengirim Data JSON ke Server

Untuk mengirim data JSON, gunakan fetch() dengan method POST dan header Content-Type: application/json:

let newUser = {
    nama: "Citra",
    umur: 22
};

fetch('https://api.example.com/user', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(newUser) // serialisasi objek ke JSON
})
    .then(response => response.json())
    .then(data => console.log('Response server:', data))
    .catch(error => console.error('Error:', error));Code language: JavaScript (javascript)

4. Menerima Response JSON dari Server

Setelah POST atau GET, response server biasanya dalam bentuk JSON. Parsing bisa dilakukan dengan:

fetch('https://api.example.com/user/1')
    .then(res => res.json())
    .then(user => {
        console.log(user.nama); // "Aris"
        console.log(user.umur); // 30
    })
    .catch(err => console.error('Error:', err));Code language: JavaScript (javascript)

5. Studi Kasus: POST dan GET Data JSON

GET Data JSON

fetch('https://api.example.com/users')
    .then(res => res.json())
    .then(users => {
        users.forEach(user => {
            console.log(`${user.id}: ${user.nama}, umur: ${user.umur}`);
        });
    });Code language: JavaScript (javascript)

POST Data JSON

let newUser = { id: 4, nama: "Dewi", umur: 28 };

fetch('https://api.example.com/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(newUser)
})
    .then(res => res.json())
    .then(data => console.log('User berhasil ditambahkan:', data))
    .catch(err => console.error(err));Code language: JavaScript (javascript)

Studi kasus ini memperlihatkan alur lengkap pertukaran data JSON antara client dan server: GET untuk membaca data, POST untuk menambahkan data.

Kesimpulan

Setelah mempelajari JSON di JavaScript, kita dapat menyimpulkan beberapa hal penting:

JSON adalah format pertukaran data yang ringan dan standar dalam pengembangan web modern.
JSON.stringify() digunakan untuk serialisasi objek JavaScript menjadi string JSON, sedangkan JSON.parse() untuk deserialisasi string JSON menjadi objek JavaScript.
Memahami validasi, manipulasi, dan akses nested data penting agar pengelolaan data aman dan efisien.
JSON mempermudah pertukaran data dengan server, API, dan penyimpanan lokal seperti localStorage.
Menguasai JSON adalah dasar yang kuat sebelum mengeksplorasi library tambahan seperti ajv untuk validasi skema JSON atau json5 untuk format JSON yang lebih fleksibel.

Dengan pemahaman ini, developer dapat menangani data JSON di proyek web atau aplikasi modern secara efisien, aman, dan scalable.