JSON, viết tắt của JavaScript Object Notation, là cách lưu trữ dữ liệu. Trong đối tượng JSON, giá trị được ánh xạ tới nhãn gọi là khóa (keys). Đối tượng JSON có thể lưu bất kỳ kiểu dữ liệu nào, bao gồm chuỗi, số nguyên, và giá trị JSON khác.
JSON là định dạng tệp chuẩn cho phép lưu và chia sẻ dữ liệu. Ngôn ngữ lập trình như JavaScript, Python, và PHP đều hỗ trợ thao tác và đọc dữ liệu JSON.
Trong hướng dẫn này, chúng ta khám phá cách dùng JavaScript JSON. Chúng ta khám phá cơ bản định dạng JSON và so sánh đối tượng JSON với đối tượng JavaScript.
JSON là gì?
JSON là phương pháp lưu và chia sẻ dữ liệu. Nó dựa trên cú pháp đối tượng JavaScript. Khác biệt là JSON dựa hoàn toàn trên văn bản, trong khi đối tượng không. JSON viết tắt của JavaScript Object Notation.
Mặc dù JSON dựa trên nguyên tắc ngôn ngữ JavaScript, nó dùng trong nhiều ngôn ngữ khác như PHP, Java và Ruby.
Bạn có thể lưu dữ liệu JSON như tệp hoặc giá trị trong chương trình. Ví dụ, chương trình có tệp mtg_cards.json lưu danh sách thẻ Magic the Gathering. Ta lưu dữ liệu trong biến JavaScript mtg_cards.
Đây cấu trúc dữ liệu lưu trong JSON:
{
"card_name": "Black Lotus",
"status": "banned",
"card_type": "Mono Artifact"
"mana": "0"
}
JSON lưu dữ liệu dùng cấu trúc gọi là cặp khóa-giá trị (key-value pairs). Cặp khóa-giá trị là mẩu dữ liệu dùng cấu trúc: "khóa": "giá trị".
81% người tham gia cho biết họ cảm thấy tự tin hơn về cơ hội việc làm công nghệ sau khi tham gia bootcamp. Được ghép nối với bootcamp ngay hôm nay.
Sinh viên trung bình của bootcamp dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được việc đầu tiên.
card_name là ví dụ khóa. Giá trị ở bên phải dấu hai chấm. Trong JSON, tên khóa lưu như chuỗi, nhưng giá trị có thể bất kỳ kiểu dữ liệu như boolean hoặc số nguyên.
JSON thường dùng API gửi dữ liệu. Ví dụ, dùng API Airtable hoặc Fitbit. Bạn cần gửi và đọc dữ liệu định dạng JSON.
Cách truy cập dữ liệu JavaScript JSON
Để truy cập dữ liệu JSON trong JavaScript, bạn dùng ngoặc vuông hoặc ký pháp chấm (dot notation). Ký pháp ngoặc vuông tương tự lấy giá trị từ mảng JavaScript. Thay vì chỉ định vị trí chỉ mục, bạn chỉ định tên khóa giá trị muốn lấy.
Xem đối tượng từ trước, định dạng đối tượng JSON:
var black_lotus = {
"card_name": "Black Lotus",
"status": "banned",
"card_type": "Mono Artifact",
"mana": "0"
}
Trong ví dụ, ta gán đối tượng JSON cho biến black_lotus. Giả sử muốn biết loại thẻ Black Lotus. Đây là thẻ bị cấm trong trò chơi bài đổi Magic the Gathering.
Ngoặc Vuông
Dùng ký pháp ngoặc vuông, ta tìm loại thẻ Black Lotus.
Để dùng ký pháp này, cần chỉ định tên đối tượng muốn lấy giá trị. Sau đó, chỉ định tên khóa liên kết giá trị đó. Bạn phải bao tên khóa trong dấu ngoặc kép và ngoặc vuông.
Mã sau lấy dữ liệu loại thẻ Black Lotus:
console.log(black_lotus["card_type"])
Mã trả về: Mono Artifact. Ta đặt ngoặc kép tên khóa, bao quanh ngoặc vuông, rồi nối vào cuối biến black_lotus. Điều này cho phép truy cập dữ liệu lưu với tên card_type.
Ký pháp Chấm
Ký pháp chấm là truy cập đối tượng bằng chỉ định tên đối tượng, theo sau dấu chấm. Sau đó chỉ định tên khóa giá trị muốn truy cập.
Để truy cập loại thẻ Black Lotus dùng ký pháp chấm, dùng mã:
console.log(black_lotus.card_type)
Mã trả về: "Mono Artifact".
Ta chỉ định tên đối tượng ("black_lotus"), theo sau khóa giá trị muốn truy cập ("card_type").
Chuyển đổi JSON
Thường khi làm việc đối tượng, bạn muốn chuyển thành chuỗi JSON, hoặc ngược lại. Thực hành phổ biến nếu muốn gửi dữ liệu qua máy chủ web.
JSON dễ thao tác trong công nghệ như JavaScript. Rất khó trích xuất tất cả giá trị từ chuỗi thuần túy.
Đầu tiên, muốn chuyển đối tượng thành chuỗi gửi qua server. Sau đó, chuyển ngược thành đối tượng để xử lý dữ liệu như đối tượng.
Để chuyển đối tượng thành chuỗi JSON, dùng hàm JSON.stringify(). Giả sử muốn chuyển đối tượng Black Lotus trước thành chuỗi. Làm như sau:
var black_lotus = {
"card_name": "Black Lotus",
"status": "banned",
"card_type": "Mono Artifact",
"mana": "0"
}
var string_black_lotus = JSON.stringify(black_lotus)
console.log(string_black_lotus)
Mã trả về văn bản JSON:
"{\"card_name\":\"Black Lotus\",\"status\":\"banned\",\"card_type\":\"Mono Artifact\",\"mana\":\"0\"}"
Như thấy, dữ liệu JSON là chuỗi. Bạn dùng phương thức JSON.parse() chuyển chuỗi ngược thành đối tượng JSON:
var black_lotus_object = JSON.parse(string_black_lotus) console.log(black_lotus_object)
Mã trả về:
{
"card_name": "Black Lotus",
"status": "banned",
"card_type": "Mono Artifact",
"mana": "0"
}
Như thấy, dữ liệu giờ là đối tượng.
JSON so với Đối tượng JavaScript
Ký pháp JSON dựa trên đối tượng JavaScript.
Vì JSON thiết kế hỗ trợ nhiều ngôn ngữ, nó không hoàn toàn giống đối tượng JavaScript. Ví dụ, JSON hỗ trợ PHP và Python. Mỗi ngôn ngữ hỗ trợ JSON có triển khai riêng.
Trong khi khóa đối tượng JavaScript không lưu trong ngoặc kép, khóa dữ liệu JSON phải lưu trong ngoặc kép.
Nếu xem tệp JSON, thấy tất cả khóa bao quanh ngoặc kép. Nếu xem đối tượng JavaScript, thấy khóa có thể không bao quanh ngoặc kép.
Cả JSON và đối tượng JavaScript lưu dữ liệu cấu trúc key-value.
Kết luận
JavaScript hỗ trợ lưu dữ liệu JSON. JSON, viết tắt JavaScript Object Notation, cách lưu dữ liệu liên quan trong một đối tượng. Mỗi giá trị trong đối tượng có nhãn riêng, cũng gọi là khóa.
Bây giờ bạn trang bị kiến thức dùng JSON trong JavaScript như chuyên gia!
Bạn muốn học thêm JavaScript? Xem hướng dẫn Cách học JavaScript. Bạn tìm mẹo hàng đầu học JavaScript và danh sách tài nguyên cho người mới và trung cấp.