JSON

JSON (JavaScript Object Notation) là định dạng dữ liệu phổ biến nhất khi trao đổi giữa frontend – backend.
Hầu hết API, storage, cấu hình hệ thống đều sử dụng JSON.

Tư duy cốt lõi:
“JSON để lưu trữ và truyền dữ liệu.”

---

1. JSON là gì?

JSON là chuỗi văn bản chứa dữ liệu theo dạng key/value giống object, nhưng bắt buộc tuân thủ cú pháp chặt chẽ.

Ví dụ JSON hợp lệ:

{
  "name": "Dai",
  "age": 20,
  "score": 9
}

2. JSON khác gì Object?

Object (JS)	JSON (chuỗi dữ liệu)
Có thể chứa function	Không chứa function
Key không cần dấu nháy	Key phải dùng dấu nháy ” “
Là cấu trúc dữ liệu	Là chuỗi văn bản
Dùng được trực tiếp	Cần parse để dùng

Ví dụ JSON sai (do key không có dấu nháy):

{ name: "Dai" }

3. Chuyển JSON → Object

(JSON.parse)

let json = '{"name":"Dai","age":20}';

let obj = JSON.parse(json);

console.log(obj.name); // Dai

parse giúp biến chuỗi JSON thành object để sử dụng.

4. Chuyển Object → JSON

(JSON.stringify)

let student = { name: "Lan", score: 10 };

let json = JSON.stringify(student);

console.log(json);
// {"name":"Lan","score":10}

stringify dùng để gửi dữ liệu lên server hoặc lưu storage.

5. JSON trong API – ví dụ thực tế

Gọi API:

fetch("https://api.example.com/users")
  .then(res => res.json()) // parse JSON tự động
  .then(data => console.log(data));

API trả về JSON → JavaScript chuyển thành Object để dùng.

6. JSON trong localStorage

Lưu dữ liệu:

let user = { name: "Dai", age: 20 };
localStorage.setItem("user", JSON.stringify(user));

Lấy dữ liệu:

let data = JSON.parse(localStorage.getItem("user"));
console.log(data.name);

JSON giúp lưu object vào bộ nhớ trình duyệt.

7. JSON mảng – rất phổ biến

[
  { "name": "A", "score": 9 },
  { "name": "B", "score": 7 }
]

JavaScript:

let json = '[{"name":"A","score":9},{"name":"B","score":7}]';
let list = JSON.parse(json);

console.log(list[0].name); // A

8. Lỗi thường gặp

• Quên đặt dấu nháy cho key trong JSON
• parse dữ liệu không phải JSON → lỗi
• stringify object chứa function → không hợp lệ
• Lạm dụng JSON mà không kiểm tra null khi lấy storage

9. Bài tập thực hành

Bài 1

Tạo object học viên và chuyển thành JSON.

Bài 2

Tạo JSON mô tả danh sách sản phẩm.
Parse JSON đó thành mảng object và in ra tên sản phẩm đầu tiên.

Bài 3

Lưu object vào localStorage → lấy ra → in ra console.

Bài 4

Tạo JSON phức hợp gồm:

• user
• danh sách roles
• thông tin liên hệ

Parse và truy cập đến email.

10. Kết luận bài học

• JSON là định dạng chuẩn để trao đổi dữ liệu
• JSON.parse → chuyển chuỗi → object
• JSON.stringify → chuyển object → chuỗi
• Cực kỳ quan trọng khi gọi API và lưu trữ dữ liệu

Bài tiếp theo: