JSON là gì? Cách đọc và tạo JSON trong JavaScript

Khi bắt đầu học JavaScript hoặc làm việc với API, bạn sẽ gặp JSON ở khắp nơi — từ file cấu hình package.json, dữ liệu trả về từ API, cho đến dữ liệu lưu trong Firebase hay MongoDB. Bài viết này giải thích JSON là gì, cấu trúc ra sao, và cách sử dụng trong JavaScript qua các ví dụ thực tế dễ hiểu. Nếu bạn chưa quen với JavaScript, hãy đọc trước bài JavaScript là gì nhé.

JSON là gì?

JSON (viết tắt của JavaScript Object Notation) là một định dạng văn bản nhẹ dùng để trao đổi dữ liệu giữa các hệ thống. JSON được Douglas Crockford thiết kế vào đầu những năm 2000, và hiện là tiêu chuẩn phổ biến nhất để trao đổi dữ liệu trong ứng dụng web.

Mặc dù tên có chứa "JavaScript", JSON hoàn toàn độc lập với ngôn ngữ lập trình. Python, Java, PHP, Ruby — hầu hết mọi ngôn ngữ đều có thư viện để đọc và ghi JSON.

Ba lý do JSON phổ biến:

• Nhẹ: nhỏ hơn XML, tiết kiệm băng thông
• Dễ đọc: dạng văn bản, con người có thể đọc trực tiếp
• Đa ngôn ngữ: dùng được với mọi ngôn ngữ lập trình

Cấu trúc JSON gồm những gì?

JSON có hai cấu trúc cơ bản: Object và Array.

Object (Đối tượng)

Tập hợp các cặp key–value, bao bởi dấu ngoặc nhọn {}. Key phải là chuỗi với dấu nháy kép. Cách dùng này tương tự đối tượng trong JavaScript, nhưng JSON là văn bản thuần, không phải object của JavaScript.

{
  "name": "Nguyễn Văn An",
  "age": 22,
  "languages": ["Python", "JavaScript"],
  "isStudent": true
}

Array (Mảng)

Danh sách giá trị có thứ tự, bao bởi dấu ngoặc vuông [].

["Python", "JavaScript", "Java"]

Các kiểu dữ liệu trong JSON

JSON hỗ trợ 6 kiểu dữ liệu sau:

Lưu ý quan trọng: JSON không hỗ trợ undefined, hàm (function), NaN, hay Infinity. Đây là điểm khác biệt so với object JavaScript thông thường.

Cách đọc JSON bằng JSON.parse()

Dữ liệu từ API hay file thường được gửi dưới dạng chuỗi văn bản JSON. Để làm việc với dữ liệu đó trong JavaScript, bạn cần dùng JSON.parse() để chuyển chuỗi thành object JavaScript.

// Chuyển chuỗi JSON thành object JavaScript
const jsonStr = '{"name": "An", "age": 22}';
const obj = JSON.parse(jsonStr);

console.log(obj.name); // "An"
console.log(obj.age);  // 22
console.log(typeof obj); // "object"

Nếu chuỗi JSON có cú pháp sai, JSON.parse() sẽ ném ra lỗi SyntaxError. Trong code thực tế, nên dùng try...catch:

try {
  const data = JSON.parse(someString);
  console.log(data);
} catch (e) {
  console.error("JSON không hợp lệ:", e.message);
}

Cách tạo JSON bằng JSON.stringify()

Khi bạn muốn gửi object lên server hoặc lưu vào localStorage, cần chuyển object thành chuỗi JSON bằng JSON.stringify().

// Chuyển object JavaScript thành chuỗi JSON
const data = { name: "An", age: 22 };
const json = JSON.stringify(data);

console.log(json);        // '{"name":"An","age":22}'
console.log(typeof json); // "string"

// Định dạng đẹp để dễ đọc (thêm indent 2 space)
console.log(JSON.stringify(data, null, 2));
// {
//   "name": "An",
//   "age": 22
// }

Ví dụ thực tế — lưu và đọc dữ liệu từ localStorage:

// Lưu object vào localStorage
const user = { name: "An", level: 3 };
localStorage.setItem("user", JSON.stringify(user));

// Đọc lại và parse
const stored = localStorage.getItem("user");
const parsed = JSON.parse(stored);
console.log(parsed.name);  // "An"
console.log(parsed.level); // 3

Dùng JSON với Fetch API

Trong thực tế, bạn sẽ thường dùng Fetch API trong JavaScript để lấy dữ liệu JSON từ server. Phương thức response.json() sẽ tự động parse chuỗi JSON trả về thành object JavaScript.

// Dùng Promise chain
fetch("https://api.example.com/users/1")
  .then(response => response.json())
  .then(data => {
    console.log(data.name); // Tên người dùng từ API
  })
  .catch(error => {
    console.error("Lỗi:", error);
  });

Hoặc viết gọn hơn với async/await:

async function getUser(id) {
  try {
    const response = await fetch(`https://api.example.com/users/${id}`);
    const data = await response.json();
    console.log(data.name);
    return data;
  } catch (error) {
    console.error("Lấy dữ liệu thất bại:", error);
  }
}

getUser(1);

Những lỗi JSON thường gặp cần tránh

Dưới đây là những lỗi mà người mới học hay mắc phải khi viết JSON:

1. Dùng dấu nháy đơn thay vì nháy kép

// Sai
{ 'name': 'An' }

// Đúng
{ "name": "An" }

2. Để dấu phẩy ở cuối (trailing comma)

// Sai — JSON không cho phép dấu phẩy cuối
{
  "name": "An",
  "age": 22,
}

// Đúng
{
  "name": "An",
  "age": 22
}

3. Quên đặt key trong dấu nháy kép

// Sai
{ name: "An" }

// Đúng
{ "name": "An" }

4. Viết comment trong JSON

// Sai — JSON không có cú pháp comment
{
  // Thông tin người dùng
  "name": "An"
}

JSON không hỗ trợ comment. Nếu cần comment trong file cấu hình, hãy xem xét dùng JSONC hoặc JSON5.

Tổng kết

Qua bài viết này, bạn đã nắm được những kiến thức cốt lõi về JSON:

• JSON là định dạng văn bản nhẹ để trao đổi dữ liệu, dùng được với mọi ngôn ngữ
• Cấu trúc gồm Object {} và Array [], với 6 kiểu dữ liệu
• JSON.parse() chuyển chuỗi JSON thành object JavaScript
• JSON.stringify() chuyển object JavaScript thành chuỗi JSON
• Fetch API dùng response.json() để tự động parse dữ liệu từ API

Hãy mở console của trình duyệt (nhấn F12) và thử chạy các ví dụ trong bài — thực hành là cách nhanh nhất để ghi nhớ. Bước tiếp theo, hãy đọc bài Fetch API trong JavaScript để hiểu cách kết hợp JSON với API call trong ứng dụng thực tế.