JSON — stringify và parse

Khi muốn lưu cài đặt hay nội dung giỏ hàng trong trình duyệt, hoặc gửi chúng lên server, bạn không đưa thẳng một object đi được — chỉ chuỗi mới lưu và gửi được.

Nếu chuyển nó sang JSON (định dạng dữ liệu biểu diễn các cặp key - value dưới dạng chuỗi) thì bạn lưu được ngay, và phía nhận cũng đưa được nó trở lại thành object ban đầu. Bài này nói về JSON.stringify để chuyển sang JSON, và JSON.parse để chuyển ngược lại.

Biến Một Object Thành Chuỗi — JSON.stringify

Muốn dùng một object để lưu hay để gửi đi, trước hết phải biến nó thành chuỗi. Nếu tự ghép chuỗi kiểu "{" + key + ":" + value + "}" thì chỉ cần một giá trị có chứa dấu nháy kép là hỏng ngay, nên hãy dùng hàm chuyển sang một định dạng cố định.

Khi bạn viết JSON.stringify(settings), nó chuyển object thành một chuỗi một dòng theo đúng cách viết của JSON. Giá trị trả về là một chuỗi, nên typeof cho ra "string", và các phương thức chuỗi như length hay includes dùng được ngay trên đó.

JSON nhìn rất giống cách viết của JavaScript, nhưng không phải là một. Key luôn phải bọc trong dấu nháy kép, và giá trị chuỗi cũng chỉ dùng dấu nháy kép.

Dấu phẩy dư ở cuối thì không được viết, comment cũng không được phép. Chính khác biệt này là nguyên nhân gây ra SyntaxError sẽ nói ở phần sau.

const product = { name: "Drip Coffee", price: 780, inStock: true };

const productJson = JSON.stringify(product);
console.log(productJson);
// {"name":"Drip Coffee","price":780,"inStock":true}

// Giá trị trả về là chuỗi nên dùng ngay được các phương thức chuỗi
console.log(typeof productJson);            // string
console.log(productJson.includes("price")); // true

// Mảng cũng chuyển đổi theo cách tương tự
console.log(JSON.stringify(["Kitchen", "Stationery"]));  // ["Kitchen","Stationery"]

Chuyển phần cài đặt của một ứng dụng thành chuỗi có thể lưu được. settings đã được khai báo sẵn.

① Hãy chuyển settings thành chuỗi JSON rồi hiển thị.

② Hãy hiển thị kiểu của kết quả thu được ở ①.

③ Hãy hiển thị số ký tự của kết quả thu được ở ①.

④ Hãy hiển thị kết quả ở ① có chứa chữ theme hay không.

(Nếu chạy đúng, phần giải thích sẽ xuất hiện.)

Cho Dễ Đọc Hơn — Thụt Lề Bằng Đối Số Thứ Ba

Chuỗi JSON gói gọn trên một dòng thì hợp để truyền đi, nhưng khó đọc khi bạn muốn kiểm tra nội dung bằng mắt. Khi cần ghi ra file cấu hình, hay vừa code vừa kiểm tra kết quả, có xuống dòng và thụt lề sẽ dễ theo dõi hơn.

Nếu truyền một số vào đối số thứ 3, như JSON.stringify(order, null, 2), bạn nhận về một chuỗi nhiều dòng, thụt lề đúng bằng số khoảng trắng đó. Đối số thứ 2 dùng để chọn lọc key; truyền null là xuất ra toàn bộ.

Dù đã định dạng thì giá trị trả về vẫn là một chuỗi, nên bạn tách được nó thành các dòng bằng split("\n"). "\n" là cách viết ký tự xuống dòng.

const product = { name: "Drip Coffee", price: 780 };

// Truyền 2 làm đối số thứ 3 để thụt lề 2 khoảng trắng
const pretty = JSON.stringify(product, null, 2);
console.log(pretty);
// {
//   "name": "Drip Coffee",
//   "price": 780
// }

// Dù đã định dạng, giá trị trả về vẫn là một chuỗi
console.log(typeof pretty);              // string
console.log(pretty.split("\n").length);  // 4

Ghi dữ liệu đơn hàng ra dạng dễ đọc, đủ để dán thẳng vào một file cấu hình. order đã được khai báo sẵn.

① Hãy hiển thị số ký tự khi chuyển đổi không thụt lề.

② Hãy chuyển sang dạng thụt lề 2 khoảng trắng rồi hiển thị y nguyên.

③ Hãy hiển thị kết quả của ② có bao nhiêu dòng.

④ Hãy hiển thị riêng dòng thứ 2 của kết quả ②.

Đưa Chuỗi Trở Lại Thành Object — JSON.parse

Chuỗi đã lưu, hay chuỗi nhận từ server, không đọc thẳng bằng order.total được. Muốn lấy giá trị ra hay tính toán trên chúng, bạn phải đưa nó trở lại thành object.

Khi bạn viết JSON.parse(savedJson), nó đọc chuỗi JSON rồi dựng lại và trả về một object. Số quay về là số, boolean quay về là boolean, nên phép tính như order.total + 1000 chạy đúng.

Mảng cũng quay về là mảng, nên length đếm được số phần tử.

Nếu bạn truyền vào một chuỗi không theo đúng cách viết của JSON thì SyntaxError xảy ra và chương trình dừng ngay tại dòng đó. Chuyện này gặp khi chuỗi có dấu phẩy dư ở cuối, key không được bọc trong dấu nháy, hay chuỗi bị cắt cụt giữa chừng.

const savedJson = '{"name":"Drip Coffee","price":780,"tags":["Kitchen"]}';

const product = JSON.parse(savedJson);
console.log(product.name);           // Drip Coffee

// Số quay về là số nên tính toán được ngay
console.log(product.price * 2);      // 1560

// Mảng quay về là mảng
console.log(product.tags.length);    // 1
console.log(typeof product);         // object

// Chuyển đi rồi chuyển lại vẫn ra đúng nội dung cũ
console.log(JSON.stringify(product) === savedJson);  // true

Đưa chuỗi đơn hàng đã lưu trở lại thành object để làm việc được với nó. savedJson đã được khai báo sẵn.

① Hãy đưa chuỗi trở lại thành object rồi hiển thị mã đơn hàng.

② Hãy hiển thị tổng tiền cộng thêm 1000.

③ Hãy hiển thị số lượng sản phẩm.

④ Hãy hiển thị kiểu của thứ vừa đưa trở lại.

Chuỗi Nhận Về Có Thể Đã Bị Hỏng

Chỉ cần kết nối đứt giữa chừng, hay file cấu hình sửa tay còn sót một dấu phẩy dư, là JSON.parse ném SyntaxError và dừng ngay tại dòng đó. Một khi đã dừng thì toàn bộ phần sau không chạy nữa, nên hãy luôn coi việc parse chuỗi nhận từ bên ngoài là thao tác có thể thất bại.

Cách viết để chương trình vẫn chạy tiếp sau một lần thất bại sẽ được nói ở bài về xử lý ngoại lệ.

Đoạn code cho sẵn đang cố đưa một chuỗi có dấu phẩy dư trở lại thành object. Hãy chạy thử nguyên như vậy để xem nó chạy được tới đâu và thông báo nào khiến nó dừng lại.

Những Gì Mất Đi Khi Chuyển Đổi Qua Lại — undefined và Date

JSON chỉ biểu diễn được chuỗi, số, boolean, null, mảng và object. Nếu object chứa những loại giá trị khác thì khi chuyển đổi, chúng sẽ âm thầm biến mất hoặc bị thay bằng dạng khác.

Đây chính là lý do dữ liệu lưu xuống rồi đọc lên lại thiếu trường so với ban đầu.

Khi chuyển đổi, property có giá trị là undefined sẽ bị loại bỏ cùng với cả key. Property có giá trị là một hàm cũng bị loại bỏ y như vậy. Còn undefined nằm trong mảng thì bị thay bằng null để giữ đúng vị trí.

Date (giá trị có sẵn dùng để biểu diễn ngày giờ; khóa học này không đề cập) bị chuyển thành chuỗi. Sau JSON.parse nó vẫn là chuỗi, không tự quay về dạng dùng được như một ngày tháng.

Nếu sau đó bạn cần dùng như ngày tháng, hãy tự tạo lại bằng new Date(chuỗi).

const record = {
  orderId: "ORD-1477",
  couponCode: undefined,
  orderedAt: new Date("2026-09-02T09:00:00Z"),
  tags: ["Kitchen", undefined],
};

const json = JSON.stringify(record);
console.log(json);
// {"orderId":"ORD-1477","orderedAt":"2026-09-02T09:00:00.000Z","tags":["Kitchen",null]}

const restored = JSON.parse(json);
console.log("couponCode" in restored);   // false (mất cả key)
console.log(typeof restored.orderedAt);  // string (không quay về thành Date)
console.log(restored.tags[1]);           // null (trong mảng thì thành null)