English 
ภาษาไทย 
Phát triển
Phát hành 02-12-2023
JSON (JavaScript Object Notation) là một định dạng dữ liệu rất quen thuộc với mỗi lập trình viên cho dù đó là lập trình web hay ứng dụng. Với tính chất dễ đọc và dễ viết cho con người đồng thời cũng dễ trong việc phân tích, xử lý hay tạo ra bởi máy tính. Từ đó ta thấy, xử lý JSON trong JavaScript là một phần rất quan trọng trong khi chúng ta làm việc với dữ liệu từ máy chủ hoặc cũng có thể là để lưu trữ dữ liệu.
Sau đây chúng ta sẽ cùng nhau tìm hiểu về cách xử lý JSON trong JavaScript:
1. JSON là gì?
Trước đây khi mà chúng ta có nhu cầu trao đổi dữ liệu giữa các nền tảng và công nghệ khác nhau chúng ta bắt đầu với XML (eXtensible Markup Language). Nhưng, qua thời gian với sự phát triển của công nghệ cũng như lượng dữ liệu trao đổi ngày càng lớn, lúc này cấu trúc thẻ của XML gây nên sự cồng kềnh cũng như làm nặng dữ liệu cần trao đổi. Từ những bất tiện trên dẫn tới nhu cầu tạo ra một loại dữ liệu mới đó là JSON.
JSON là một bộ quy tắc về cách trình bày và cách mô tả dữ liệu trong một chuỗi lớn thống nhất và được gọi là chuỗi JSON
Xem thêm bài viết về chủ đề Javascript:
- Xử lý chuỗi trong JavaScript
- Hàm trong JavaScript và cách xây dựng
- Sử dụng và tối ưu hóa vòng lặp trong JavaScript
2. Cấu trúc chuỗi JSON
Ví dụ:
// Ex.1
{"company": "STRINGEE JOINT STOCK COMPANY", "email": "[email protected]", "phone": 18006670, "data": {"httpCode": 200, "numberList": [1, 2, 3, 4], "stringList": ["Stringee", "Company"]}}
// Ex.2
{
"company": "STRINGEE JOINT STOCK COMPANY",
"email": "[email protected]",
"phone": 18006670,
"data": {
"httpCode": 200,
"numberList": [1, 2, 3, 4],
"stringList": ["Stringee", "Company"]
}
}
Cả 2 ví dụ trên đều là các chuỗi JSON hợp lệ để sử dụng và giao tiếp giữa các hệ thống với nhau. Nhưng thông thường để đảm bảo sự gọn nhẹ, trong các ngôn ngữ lập trình khi chúng ta tạo ra chuỗi JSON thì mặc định nó sẽ ở dạng Ex.1.
Thông qua 2 ví dụ trên ta có thể thấy chuỗi JSON bắt đầu với { và sẽ kết thúc với }.
Các giá trị trong chuỗi JSON sẽ được lưu theo từng cặp key - value. Các dữ liệu trong chuỗi JSON được cách nhau bởi dấu phẩy ,
Chú ý: Trong JSON ta cũng có những quy tắc đặt tên biến được khuyến nghị như trong các ngôn ngữ như: camelcase hay snake case.
3. Chuyển đổi giữa JSON và đối tượng JavaScript
Trong JavaScript có 2 phương thức tích hợp sẵn là JSON.stringify() và JSON.parse(). Với 2 phương thức này chúng ta có thể chuyển đổi một cách linh hoạt giữa chuỗi JSON và đối tượng JavaScript.
- JSON.stringify(): Phương thức chuyển đổi một đối tượng JavaScript thành chuỗi JSON.
Ví dụ:
const dataObj = {
company: "STRINGEE JOINT STOCK COMPANY",
email: "[email protected]",
phone: 18006670
};
const jsonStr = JSON.stringify(dataObj);
console.log(jsonStr); // Kết quả: '{"company": "STRINGEE JOINT STOCK COMPANY", "email": "[email protected]", "phone": 18006670}'
- JSON.parse(): Phương thức chuyển đổi một chuỗi JSON thành đối tượng JavaScript.
Ví dụ:
const jsonStr = '{"company": "STRINGEE JOINT STOCK COMPANY", "email": "[email protected]", "phone": 18006670}';
const dataObj = JSON.parse(jsonStr);
console.log(dataObj);
// Kết quả:
{
company: "STRINGEE JOINT STOCK COMPANY",
email: "[email protected]",
phone: 18006670
}
4. Phân tích và tạo ra chuỗi JSON
Trong thực tế, chúng ta sẽ cần xử lý chuỗi JSON sau khi nhận từ máy chủ hoặc tạo ra JSON trước khi gửi lên máy chủ.
- Phân tích JSON: Tương tự như đã hướng dẫn ở trên, khi nhận được chuỗi JSON từ máy chủ, chúng ta sẽ cần sử dụng phương thức
JSON.parse()để chuyển một chuỗi JSON thành đối tượng JavaScript và sau đó ta có thể làm việc với đối tượng JavaScript này.
Ví dụ:
const jsonStr = '{"company": "STRINGEE JOINT STOCK COMPANY", "email": "[email protected]", "phone": 18006670}';
const dataObj = JSON.parse(jsonStr);
console.log(dataObj.company); // Kết quả: "STRINGEE JOINT STOCK COMPANY"
Trong những trường hợp ta cần xử lý các dữ liệu trong khi chuyển đổi chuỗi JSON thành Object thì ta có thể làm như sau:
Ví dụ:
const jsonStr = '{"company": "STRINGEE JOINT STOCK COMPANY", "date": "2023-07-27"}';
const dataObj = JSON.parse(jsonStr, (key, value) => {
return key === "date" ? new Date(value) : value;
});
console.log(dataObj.date); // Kết quả: 2023-07-27T00:00:00.000Z
- Tạo ra JSON: Trong JavaScript, để gửi dữ liệu lên máy chủ, chúng ta sẽ làm việc với một đối tượng JavaScript trước, đối tượng này sẽ chứa dữ liệu ta cần gửi đi và sau đó ta sử dụng phương thức
JSON.stringify()để chuyển đối tượng này thành chuỗi JSON.
const dataObj = {
company: "STRINGEE JOINT STOCK COMPANY",
email: "[email protected]",
phone: 18006670
}
// Chuyển đổi đối tượng thành chuỗi JSON để gửi lên máy chủ
const jsonStr = JSON.stringify(dataObj);
console.log(jsonStr); // Kết quả: '{"company": "STRINGEE JOINT STOCK COMPANY", "email": "[email protected]", "phone": 18006670}'
5. Xử lý lỗi khi làm việc với JSON
Khi làm việc với JSON, không thể nào tránh khỏi việc lỗi có thể xảy ra, thường các lỗi như sai cú pháp hay chuỗi JSON không hợp lệ là các lỗi hay gặp nhất.
try {
const invalidJson = '{"company": "STRINGEE JOINT STOCK COMPANY", "email":}'; // Sai cú pháp JSON
const parsedData = JSON.parse(invalidJson); // => Lỗi
} catch (error) {
console.error("Lỗi xử lý JSON:", error.message);
}
Tổng kết
JSON, là một công cụ quan trọng và mạnh mẽ trong việc phát triển web và ứng dụng. Trong bài viết này, chúng ta đã thấy cách chuyển đổi giữa đối tượng JavaScript và chuỗi JSON bằng JSON.stringify() và JSON.parse(), cách phân tích và tạo ra JSON, cũng như cách xử lý lỗi khi làm việc với JSON. Và hi vọng rằng thông qua bài viết này sẽ giúp bạn hiểu rõ hơn về cách sử dụng JSON trong JavaScript.
Stringee hiện là đơn vị cung cấp bộ giải pháp giao tiếp Communication APIs giúp doanh nghiệp dễ dàng tích hợp các tính năng giao tiếp như gọi thoại/gọi video/chat vào ứng dụng hoặc website sẵn trong thời gian ngắn với chi phí tối ưu nhất. Giải pháp này cũng được hỗ trợ cho nền tảng React Native, chi tiết xin mời quý bạn đọc xem thêm tại đây.
Chia sẻ bài viết
