Trong bài viết này, bạn sẽ được tìm hiểu về cách mã hóa (endcode) và giải mã dữ liệu (decode) JSON trong JavaScript.
Để bắt đầu.
Trước tiên bạn cần biết....
1. JSON LÀ GÌ?
JSON là viết tắt của JavaScript Object Notation.
JSON là định dạng trao đổi dữ liệu (phổ biến) cực kỳ nhẹ để trao đổi dữ liệu giữa máy chủ và máy khách.
Chúng ta có thể nhanh chóng và dễ dàng để tạo ra và phân tích cú pháp của JSON.
Giống như XML, JSON cũng là một định dạng dựa trên văn bản dễ viết và dễ hiểu cho cả người và máy tính.
Nhưng không giống như XML, cấu trúc dữ liệu JSON chiếm ít băng thông hơn các phiên bản XML của chúng.
JSON dựa trên hai cấu trúc cơ bản:
-
Đối tượng: Đây được định nghĩa là một tập hợp không có thứ tự của các cặp key / value (tức là
key: value). Mỗi đối tượng bắt đầu bằng dấu ngoặc nhọn bên trái { và kết thúc bằng dấu ngoặc nhọn bên phải }. Nhiều cặp key: value được phân tách bằng dấu phẩy ,.
-
Mảng: Đây được định nghĩa là danh sách các giá trị có thứ tự. Một mảng bắt đầu bằng dấu ngoặc trái
[ và kết thúc bằng dấu ngoặc phải ]. Các giá trị được phân tách bằng dấu phẩy ,.
Trong JSON:
-
Tên thuộc tính hoặc key luôn là chuỗi, trong khi giá trị có thể là
string, number, true hoặc false, null hoặc thậm chí là một đối tượng hoặc một mảng.
-
Các chuỗi phải được đặt trong dấu ngoặc kép
" " và có thể chứa các ký tự đặc biệt (được thông dịch) như \n, \t và \.
Một đối tượng JSON có thể trông giống như sau:
{
"book": {
"name": "101 con đường tỷ đô",
"author": "Nguyễn Văn Giàu",
"year": 2020,
"genre": "Xạo ke",
"bestseller": false
}
}
Trong khi một ví dụ về mảng JSON sẽ trông giống như sau:
{
"colors": [
"Xanh",
"Đỏ",
"Tím",
"Vàng"
]
}
> Ghi chú: Data-interchange format là một định dạng văn bản được sử dụng để trao đổi hoặc trao đổi dữ liệu giữa các nền tảng và hệ điều hành khác nhau. JSON là định dạng trao đổi dữ liệu nhẹ và phổ biến nhất cho các ứng dụng web.
2. PHÂN TÍCH CÚ PHÁP JSON TRONG JAVASCRIPT
Trong JavaScript, bạn có thể dễ dàng phân tích cú pháp dữ liệu JSON nhận được từ máy chủ web bằng phương thức JSON.parse().
> Có thể bạn sẽ tích: HỌC JAVASCRIPT CƠ BẢN
Phương thức này phân tích cú pháp một chuỗi JSON và xây dựng giá trị JavaScript hoặc đối tượng được mô tả bởi chuỗi đó.
Nếu chuỗi đã cho không phải là JSON hợp lệ, bạn sẽ gặp lỗi cú pháp.
Giả sử chúng ta đã nhận được chuỗi được mã hóa JSON sau từ máy chủ web:
{
"name": "NIIT - ICT HÀ NỘI",
"age": 18,
"country": "Việt Nam"
}
Bây giờ, chúng ta có thể chỉ cần sử dụng phương thức JavaScript JSON.parse() để chuyển đổi chuỗi JSON này thành một đối tượng JavaScript và truy cập các giá trị riêng lẻ bằng cách sử dụng toán tử dot (.)
Như sau:
// Lưu chuỗi JSON như vào biến JS
var json = '{"name": "NIIT - ICT HÀ NỘI","age": 18,"country": "Việt Nam"}';
// Chuyển đổi chuỗi JSON thành đối tượng trong JS
var obj = JSON.parse(json);
// Truy cập phần tử riêng lẻ như đối tượng trong JS
console.log(obj.name); // Kết quả: NIIT - ICT Hà Nội
console.log(obj.age); // Kết quả: 18
console.log(obj.country); // Kết quả: Việt Nam
Trong JAVA và PHP sẽ có những phương thức và đối tượng tương ứng để hỗ trợ xử lý JSON.
3. PHÂN TÍCH CÚ PHÁP JSON LỒNG NHAU TRONG JAVASCRIPT
Các đối tượng và mảng JSON cũng có thể được lồng vào nhau. Một đối tượng JSON có thể tùy ý chứa các đối tượng JSON khác, mảng, mảng lồng nhau, mảng đối tượng JSON, v.v.
Để xử lý JSON lồng nhau như vậy sẽ phức tạp hơn một chút.
Ví dụ sau sẽ chỉ cho bạn cách phân tích cú pháp một đối tượng JSON lồng nhau và trích xuất tất cả các giá trị bằng JavaScript.
/* Lưu JSON trong biến JS với ES6 template literals */
var json = `{
"book": {
"name": "101 con đường tỷ đô",
"author": "Nguyễn Văn Giàu",
"year": 2020,
"coAuthors": ["Phạm Tỷ", "Quyết Đô", "Linh Tinh"],
"genre": "Xạo ke",
"price": {
"paperback": "69000", "hardcover": "99000", "pdf": "25000"
}
}
}`;
// Chuyển từ đối tượng JSON thành đối tượng JS
var obj = JSON.parse(json);
Vì đối tượng nhận được chứa mảng và đối tượng con nên ta kiểm tra, nếu kiểu của nó là Object thì lặp hồi quy.
// Tạo hàm hồi quy để in giá trị lồng bên trong
function printValues(obj) {
for (var k in obj) {
if (obj[k] instanceof Object) {
printValues(obj[k]);
} else {
console.log(obj[k]);
};
}
};
// In ra tất cả các giá trị
printValues(obj);
Kết quả nhận được là:
101 con đường tỷ đô
Nguyễn Văn Giàu
2020
Phạm Tỷ
Quyết Đô
Linh Tinh
Xạo ke
69000
99000
25000
Còn nếu bạn biết rõ cấu trúc của chuỗi JSON thì bạn có thể truy cập từng giá trị như sau:
// In ra từng giá trị
console.log(obj["book"]["author"]); // Kết quả: Nguyễn Văn Giàu
console.log(obj["book"]["coAuthors"][0]); // Kết quả: Phạm Tỷ
console.log(obj["book"]["price"]["hardcover"]); // Kết quả: 99000
4. MÃ HÓA DỮ LIỆU DƯỚI DẠNG JSON VỚI JS
Đôi khi đối tượng hoặc giá trị JavaScript từ mã của bạn cần được chuyển đến máy chủ qua Ajax.
JavaScript cung cấp phương thức JSON.stringify() để để chuyển đổi giá trị JavaScript thành một chuỗi JSON, như được hiển thị bên dưới:
Xâu chuỗi một đối tượng JS
Ví dụ sau sẽ chỉ cho bạn cách chuyển đổi một đối tượng JavaScript thành chuỗi JSON:
// Đối tượng trong JS
var obj = {
"name": "NIIT - ICT Hà Nội",
"age": 18,
"country": "Việt Nam"
};
// Chuyển đối tượng JS thành JSON
var json = JSON.stringify(obj);
console.log(json);
Kết quả ta nhận được một chuỗi JSON đúng định dạng chuẩn:
{"name":"NIIT - ICT Hà Nội","age":18,"country":"Việt Nam"}
Mặc dù, các đối tượng JavaScript và chuỗi JSON trông khá giống nhau, nhưng chúng không hoàn toàn giống nhau.
> Lưu ý: Trong JavaScript, tên thuộc tính của đối tượng có thể được đặt trong dấu nháy đơn (' ') hoặc dấu nháy kép (" "), hoặc bạn có thể bỏ qua hoàn toàn các dấu nháy. Tuy nhiên, trong JSON, tất cả các tên thuộc tính phải được đặt trong dấu nháy kép " ".
Xâu chuỗi một mảng JavaScript
Tương tự, bạn có thể chuyển đổi các mảng JavaScript thành chuỗi JSON, như sau:
// Một mảng trong JS
var arr = ["Xanh", "Đỏ", "Tím", "Vàng", "Hồng"];
// Chuyển đổi mảng JS thành JSON
var json = JSON.stringify(arr);
console.log(json);
Kết quả ta nhận được:
["Xanh","Đỏ","Tím","Vàng","Hồng"]
> CẢNH BÁO: Không sử dụng hàm eval() để đánh giá dữ liệu JSON vì thông qua đó hacker có thể chèn mã JavaScript độc hại vào trang web / ứng dụng của bạn.
Như vậy, qua bài này mình đã giúp bạn biết các mã hóa / giải mã JSON trong JavaScript.
> Nếu bạn đang tích cực học để lập trình web thì tham khảo ngay KHÓA HỌC LẬP TRÌNH WEB (Full Stack) với lộ trình bài bản, hướng dẫn bởi giảng viên doanh nghiệp trong 12 tháng.
> Hoặc tham khảo KHÓA HỌC JAVA hoặc KHÓA HỌC PHP nếu bạn thích học nhanh hơn, rút gọn hơn.
---
HỌC VIỆN ĐÀO TẠO CNTT NIIT - ICT HÀ NỘI
Học Lập trình chất lượng cao (Since 2002). Học làm Lập trình viên. Hành động ngay!
Đc: Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội
SĐT: 02435574074 - 0914939543
Email: hello@niithanoi.edu.vn
Fanpage: https://facebook.com/NIIT.ICT/
#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python