Chuyển đổi JSON text thành Object JavaScript với JSON.parse()

JSON.parse() chuyển chuỗi JSON (string) thành đối tượng/giá trị JavaScript. Đây là phương thức chuẩn để deserialize JSON.

Cú pháp:

JSON.parse(text[, reviver])

• text: Chuỗi JSON hợp lệ
• reviver (tùy chọn): Function biến đổi kết quả trước khi trả về

Ví dụ minh họa

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JSON.parse() Example</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; padding: 20px; }
    .sample { font-size: 16px; font-weight: 500; margin: 10px 0; color: red; font-family: monospace; background: #f5f5f5; padding: 10px; }
    .result { font-size: 18px; font-weight: 500; margin: 10px 0; color: green; }
    button { padding: 8px 16px; cursor: pointer; }
  </style>
</head>
<body>
  <h1>JSON.parse() - Chuyển JSON string thành Object</h1>
  <div class="sample" id="sample">{"name":"Rohan", "sports":["Cricket","Football"], "country":"India"}</div>
  <div class="result" id="result"></div>
  <button class="Btn" id="btn">PARSE JSON</button>
  <h3> Nhấn nút để parse chuỗi JSON trên </h3>
  <script>
    const sampleEle = document.querySelector("#sample");
    const resultEle = document.querySelector("#result");
    
    // Parse ngay khi load (hoặc trong event handler)
    let parsedJson;
    try {
      parsedJson = JSON.parse(sampleEle.innerHTML);
    } catch (e) {
      resultEle.innerHTML = "❌ JSON không hợp lệ: " + e.message;
    }
    
    document.querySelector("#btn").addEventListener("click", () => {
      if (!parsedJson) return;
      resultEle.innerHTML = `Name = ${parsedJson.name}
`;
      resultEle.innerHTML += `Country = ${parsedJson.country}
`;
      resultEle.innerHTML += `Sports = ${parsedJson.sports.join(", ")}
`;
      resultEle.innerHTML += `
Type: ${typeof parsedJson}
`;
      resultEle.innerHTML += `Array? ${Array.isArray(parsedJson.sports)}`;
    });
  </script>
</body>
</html>

Kết quả

Name = Rohan
Country = India
Sports = Cricket, Football

Type: object
Array? true

Reviver Function (Nâng cao):

const json = '{"date": "2024-01-15T10:30:00Z", "value": 42}';

// Tự động chuyển string ISO thành Date object
const obj = JSON.parse(json, (key, value) => {
  if (key === "date" && typeof value === "string") {
    return new Date(value); // Transform
  }
  return value; // Giữ nguyên các key khác
});

console.log(obj.date instanceof Date); // true
console.log(obj.date.toLocaleString()); // Định dạng local

Xử lý lỗi (Error Handling):

function safeParse(jsonString, fallback = null) {
  try {
    return JSON.parse(jsonString);
  } catch (e) {
    console.warn("Invalid JSON:", e.message);
    return fallback;
  }
}

const data = safeParse(invalidJson, { default: true });

JSON hợp lệ vs Không hợp lệ:

JSON.stringify() - Ngược lại (Serialize):

const obj = { name: "Rohan", sports: ["Cricket", "Football"] };
const json = JSON.stringify(obj); 
// '{"name":"Rohan","sports":["Cricket","Football"]}'

// Pretty print
JSON.stringify(obj, null, 2);
// '{
//   "name": "Rohan",
//   "sports": [
//     "Cricket",
//     "Football"
//   ]
// }'

// Replacer function
JSON.stringify(obj, (key, value) => {
  if (key === "sports") return value.join(" | ");
  return value;
});

Lưu ý: JSON không hỗ trợ: undefined, Function, Symbol, BigInt, Date (chuyển thành string), circular reference.