Structured Data — JSON

JSON là gì?

JSON (viết tắt của JavaScript Object Notation) là định dạng trao đổi dữ liệu nhẹ (lightweight data interchange format), được dùng phổ biến để lưu trữ và truyền dữ liệu giữa server và client.

Nhẹ & Dễ đọc

Cú pháp đơn giản, tương tự Object literal trong JS

Ngôn ngữ độc lập

Hầu hết ngôn ngữ đều hỗ trợ parse/stringify JSON

Tiêu chuẩn web

Định dạng chính cho REST API, localStorage, file config

---

Cấu trúc JSON

JSON chỉ hỗ trợ 6 kiểu giá trị: string, number, boolean, null, array, object.

Object

Gồm các cặp key–value, viết trong dấu {}. Key bắt buộc là chuỗi (có dấu nháy kép).

{
  "name": "An Giang",
  "age": 21,
  "student": true
}

Array

Danh sách các giá trị, viết trong dấu [].

[
  "Python",
  "JavaScript",
  "C#"
]

Lồng nhau

Object và Array có thể lồng nhau tạo cấu trúc phức tạp.

{
  "name": "An",
  "skills": ["JS", "Python"],
  "address": {
    "city": "HCM",
    "country": "VN"
  }
}

---

API trong JavaScript

JSON.stringify() — Object → chuỗi JSON

const obj = { name: "An", age: 21, hobbies: ["code", "music"] };

// Cơ bản
const json = JSON.stringify(obj);
// '{"name":"An","age":21,"hobbies":["code","music"]}'

// Đẹp hơn (indented)
const pretty = JSON.stringify(obj, null, 2);
/*
{
  "name": "An",
  "age": 21,
  "hobbies": [
    "code",
    "music"
  ]
}
*/

JSON.parse() — Chuỗi JSON → Object

const json = '{"name":"An","age":21}';
const obj = JSON.parse(json);

console.log(obj.name); // "An"
console.log(obj.age);  // 21

---

Tham số nâng cao

replacer (stringify)

Lọc hoặc biến đổi giá trị khi stringify:

const user = { name: "An", password: "secret", age: 21 };

// Chỉ giữ một số key
JSON.stringify(user, ["name", "age"]);
// '{"name":"An","age":21}'

// Dùng function
JSON.stringify(user, (key, val) => {
  if (key === "password") return undefined; // loại bỏ
  return val;
});

reviver (parse)

Biến đổi giá trị khi parse:

const json = '{"date":"2024-01-15T00:00:00.000Z","name":"An"}';

const obj = JSON.parse(json, (key, val) => {
  if (key === "date") return new Date(val);
  return val;
});

console.log(obj.date instanceof Date); // true

---

Những gì JSON KHÔNG hỗ trợ

Giới hạn của JSON

JSON không serialize được các giá trị sau — chúng bị bỏ qua hoặc chuyển thành null:

Giá trị	Kết quả khi stringify
undefined	Bị bỏ qua (trong object) / null (trong array)
function	Bị bỏ qua
Symbol	Bị bỏ qua
Infinity, NaN	Chuyển thành null
Date	Chuyển thành chuỗi ISO
Map, Set	Chuyển thành {} (rỗng)
Circular reference	TypeError

JSON.stringify({ a: undefined, b: () => {}, c: NaN });
// '{"c":null}' — a và b bị bỏ qua, NaN thành null

---

Deep Clone với JSON

const original = { a: 1, b: { c: 2 } };

// Clone nhanh (có giới hạn)
const clone = JSON.parse(JSON.stringify(original));
clone.b.c = 99;
console.log(original.b.c); // 2 (không bị ảnh hưởng)

Thay thế tốt hơn

Từ ES2024, dùng structuredClone() để deep clone — hỗ trợ Date, Map, Set, circular reference:

const clone = structuredClone(original);

---

Ứng dụng thực tế

REST API

Gửi/nhận dữ liệu qua HTTP (fetch, axios)

localStorage

Lưu trữ dữ liệu phía client

localStorage.setItem("user", JSON.stringify(user));
const u = JSON.parse(localStorage.getItem("user"));

Config files

package.json, tsconfig.json, .eslintrc.json

Data exchange

Trao đổi dữ liệu giữa các ngôn ngữ/hệ thống khác nhau