NỘI DUNG BÀI VIẾT
Chỉ cần dành ra 10 phút, bạn sẽ nắm được toàn bộ các kiến thức cơ bản về JSON. Nào, cùng mình bắt đầu học JSON thôi!
JSON là gì?
JSON là cụm từ viết tắt của JavaScript Object Notation. Nó là một định dạng dữ liệu dựa trên văn bản được sử dụng để lưu trữ và trao đổi dữ liệu giữa client và server giống như XML. File chỉ chứa văn bản và sử dụng phần mở rộng là .json.
Tuy nhiên, các đối tượng JSON có một số ưu điểm so với XML và chúng ta sẽ thảo luận về vấn đề này trong các phần của bài viết.
Trước hết, hãy xem 1 ví dụ đơn giản về JSON:
var chaitanya = {
"firstName" : "Chaitanya",
"lastName" : "Singh",
"age" : "28"
};Code language: JavaScript (javascript)Đặc điểm của JSON
- Rất nhẹ
- Độc lập với ngôn ngữ lập trình
- Dễ đọc, dễ viết
- Trao đổi dữ liệu dựa vào các đoạn văn bản, người bình thường cũng có thể hiểu được
Tại sao sử dụng JSON?
Cấu trúc tiêu chuẩn: Cấu trúc của JSON hiện nay tương tự như một đối tượng trong JavaScript, các lập trình viên đều sử dụng vì nó dễ đọc và dễ viết. Điều này tạo nên tiêu chuẩn mà bất cứ ai sử dụng JSON đều phải tuân theo.
Kích thước nhẹ: Khi trang web giao tiếp với người dùng, điều quan trọng nhất là trang web đó có thể tải dữ liệu 1 cách nhanh chóng mà không cần tải lại trang. JSON đáp ứng điều này rất tốt do kích thước nhẹ, việc lấy và tải dữ liệu trở nên nhanh chóng hơn.
Có thể mở rộng: JSON độc lập với ngôn ngữ lập trình, điều này có nghĩa rằng nếu ứng dụng của bạn ngày càng lớn mạnh, cần tích hợp thêm các công nghệ, ngôn ngữ lập trình mới thì sẽ không ảnh hưởng đến JSON vì JSON tương thích với hầu hết các ngôn ngữ lập trình hiện đại.
Vậy còn chần chờ gì nữa mà không bắt đầu học JSON ngay thôi nào?
JSON và XML
Cùng xem ví dụ về cách JSON và XML lưu trữ 4 bản ghi về students:
JSON
{"students":[
{"name":"John", "age":"23", "city":"Agra"},
{"name":"Steve", "age":"28", "city":"Delhi"},
{"name":"Peter", "age":"32", "city":"Chennai"},
{"name":"Chaitanya", "age":"28", "city":"Bangalore"}
]}Code language: JSON / JSON with Comments (json)XML
<students>
<student>
<name>John</name> <age>23</age> <city>Agra</city>
</student>
<student>
<name>Steve</name> <age>28</age> <city>Delhi</city>
</student>
<student>
<name>Peter</name> <age>32</age> <city>Chennai</city>
</student>
<student>
<name>Chaitanya</name> <age>28</age> <city>Bangalore</city>
</student>
</students>Code language: HTML, XML (xml)Có thể thấy, JSON nhìn rõ ràng hơn và có cấu trúc giống với ngôn ngữ lập trình hơn XML.
Các kiểu lưu trữ JSON và cách đọc chúng
Có 3 kiểu lưu trữ JSON:
1. JSON Objects
var chaitanya = {
"name" : "Chaitanya Singh",
"age" : "28",
"website" : "beginnersbook"
};Code language: JavaScript (javascript)Đối tượng JSON được lưu trữ vào biến chaitanya, vì vậy chúng ta có thể sử dụng nó để truy cập vào các thuộc tính của đối tượng. Các thuộc tính là các cặp khoá – giá trị (key – value). Nếu muốn thêm thuộc tính vào đối tượng, bạn chỉ cần viết tương tự như các thuộc tính ở trên.
document.writeln("The name is: " + chaitanya.name);
document.writeln("his age is: " + chaitanya.age);
document.writeln("his website is: " + chaitanya.website);Code language: JavaScript (javascript)2. Mảng JSON Objects
Trong ví dụ trên, chúng ta đã lưu trữ thông tin của một người dùng trong một đối tượng JSON, giả sử chúng ta muốn lưu trữ thông tin của nhiều hơn một người. Trong trường hợp đó, chúng ta có thể sử dụng một mảng các đối tượng JSON.
var students = [{
"name" : "Steve",
"age" : "29",
"gender" : "male"
},
{
"name" : "Peter",
"age" : "32",
"gender" : "male"
},
{
"name" : "Sophie",
"age" : "27",
"gender" : "female"
}];Code language: JavaScript (javascript)Để truy cập vào mảng này, chúng ta coi nó như một mảng thông thường.
document.writeln(students[0].age); // 29
document.writeln(students[2].name); // SophieCode language: JavaScript (javascript)3. Mảng JSON Objects lồng nhau
var students = {
"steve" : {
"name" : "Steve",
"age" : "29",
"gender" : "male"
},
"pete" : {
"name" : "Peter",
"age" : "32",
"gender" : "male"
},
"sop" : {
"name" : "Sophie",
"age" : "27",
"gender" : "female"
}
}Code language: JavaScript (javascript)Việc lấy thông tin của các đối tượng cũng rất đơn giản.
document.writln(students.steve.age); // 29
document.writeln(students.sop.gender); // femaleCode language: JavaScript (javascript)JSON và JavaScript
JSON được coi là một tập con của JavaScript nhưng điều đó không có nghĩa là JSON không thể được sử dụng với các ngôn ngữ lập trình khác. Trên thực tế, nó hoạt động tốt với PHP, Perl, Python, Ruby, Java và nhiều hơn nữa.
Làm thế nào để đọc dữ liệu từ tệp json và chuyển đổi nó thành một đối tượng trong JavaScript?
Có 2 cách để thực hiện việc này:
- Sử dụng hàm eval(): Cách này không nên sử dụng vì dữ liệu độc hại có thể được gửi từ server đến client
- Truyền dữ liệu JSON: Cách này nhanh và an toàn hơn eval() vì nó không có nguy hiểm về bảo mật
var chaitanya = {
"firstName" : "Chaitanya",
"lastName" : "Singh",
"age" : "28"
};Code language: JavaScript (javascript)Sử dụng hàm JSON.parse() để chuyển đối tượng JSON thành đối tượng trong JavaScript.
var myJSObject = JSON.parse(chaitanya);
Code language: JavaScript (javascript)Ngược lại, khi muốn chuyển đối tượng trong JavaScript thành đối tượng JSON ở dạng văn bản, ta sử dụng hàm JSON.stringify().
var jsonText= JSON.stringify(myJSObject);
Code language: JavaScript (javascript)Sau 10 phút học JSON
JSON thật đơn giản phải không nào? Mình đoán là bạn sẽ không mất đến 10 phút để có thể nắm được các kiến thức cơ bản về JSON đâu.
Sau khi xem xong bài viết này, bạn nên làm một số bài tập về JSON để hiểu rõ bản chất, thành thạo được cách đọc và cách viết JSON nhé!
Cảm ơn bạn đã xem bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/PHP/.NET TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
