Trong bài viết này, ta sẽ tìm hiểu về định dạng JSON trong JavaScript cùng với sự trợ giúp của các ví dụ dẫn chứng.
Định dạng JSON
JSON là từ viết tắt của Javascript Object Notation. JSON 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à truyền dữ liệu.
Ví dụ về JSON:
|
1 2 3 4 |
{ "ten": "Nam", "ID": 100 } |
Trong JSON, dữ liệu được lưu trữ trong các cặp khóa và giá trị được phân tách bằng dấu phẩy, JSON được bắt nguồn từ JavaScript. Vì vậy, cú pháp JSON giống với cú pháp của đối tượng trong JavaScript. Tuy nhiên, định dạng JSON cũng có thể được truy cập và được tạo bởi các ngôn ngữ lập trình khác.
Chú ý: Đối tượng JavaScript và JSON là không giống nhau. Ta sẽ tìm hiểu về sự khác biệt của chúng ở phần sau trong bài viết này.
Dữ liệu JSON
Dữ liệu JSON bao gồm các cặp khóa và giá trị tương tự như các thuộc tính đối tượng trong JavaScript. Khóa và giá trị được viết trong dấu ngoặc kép cách nhau bằng dấu hai chấm:.
Ví dụ:
|
1 |
"ten": "Nam", |
Chú ý: Dữ liệu JSON yêu cầu dấu nháy kép được sử dụng cho khóa.
Đối tượng JSON
Đối tượng JSON được viết bên trong dấu ngoặc nhọn {}. Các đối tượng JSON có thể chứa nhiều cặp khóa và giá trị.
Ví dụ:
|
1 |
{ "ten": "Nam", "ID": 100 } |
Mảng JSON
Mảng ở định dạng JSON được viết bên trong dấu ngoặc vuông [].
Ví dụ:
|
1 |
[100, 200, 300] |
Hoặc
|
1 2 3 4 5 |
[ { "ten": "Nam", ID: 100 }, { "ten": "Trung", ID: 200 }. { "ten": "Thanh", ID: 300 } ] |
Chú ý: Dữ liệu JSON có thể chứa các đối tượng và mảng. Tuy nhiên, không giống như các đối tượng trong JavaScript, dữ liệu JSON không thể chứa các hàm dưới dạng giá trị.
Truy cập dữ liệu ở định dạng JSON
Ta có thể truy cập dữ liệu ở định dạng JSON bằng cách sử dụng ký hiệu dấu chấm.
Ví dụ:
|
1 2 3 4 5 6 7 |
const data = { "ten": "Nam", "ID": 100, "email":"Nam@aaaaaa" } console.log(data.ten); console.log(data.email); |
Chúng ta sử dụng ký hiệu dấu chấm để truy cập dữ liệu JSON.
Cú pháp như sau:
|
1 |
Tên_biến.khóa |
Ta cũng có thể sử dụng cú pháp dấu ngoặc vuông []để truy cập dữ liệu JSON.
Ví dụ:
|
1 2 3 4 5 6 7 |
const data = { "ten": "Nam", "ID": 100, "email":"Nam@aaaaaa" } console.log(data['ten']); console.log(data['email']); |
So sánh kiểu dữ liệu JSON với kiểu dữ liệu Object (đối tượng) trong Javascript
| JSON | Đối tượng trong Javascript |
| Cặp khóa và giá trị được đặt trong dấu nháy kép. | Cặp khóa và giá trị có thể hoặc không được đặt trong dấu nháy kép. |
| Không thể chứa các hàm. | Có thể chứa các hàm. |
| Được tạo và sử dụng bởi các ngôn ngữ lập trình khác. | Chỉ có thể được sử dụng trong ngôn ngữ lập trình Javascript. |
Chuyển đổi JSON thành đối tượng trong JavaScript
Ta có thể chuyển đổi dữ liệu JSON sang một đối tượng trong JavaScript bằng cách sử dụng hàm JSON.parse() đã được tích hợp sẵn.
Ví dụ:
|
1 2 3 |
const data = '{"ten": "Nam", "ID": 100}'; const obj = JSON.parse(data); console.log(obj.ten); |
Chuyển đổi đối tượng trong JavaScript thành định dạng JSON
Ta cũng có thể chuyển đổi các đối tượng trong JavaScript sang định dạng JSON bằng cách sử dụng hàm JSON.stringify()được tích hợp sẵn trong JavaScript.
Ví dụ:
|
1 2 3 |
const obj = { 'ten': 'Nam', 'ID': 100 }; const data = JSON.stringify(obj); console.log(data); |
Công dụng của JSON
JSON là định dạng được sử dụng phổ biến nhất để truyền dữ liệu (trao đổi dữ liệu) từ máy chủ đến máy khách và ngược lại. Dữ liệu JSON rất dễ phân tích và sử dụng. Truy cập và thao tác dữ liệu JSON sẽ diễn ra nhanh chóng vì chúng chỉ chứa văn bản. JSON độc lập với ngôn ngữ lập trình. Ta cũng có thể tạo và sử dụng JSON trong các ngôn ngữ lập trình khác.
Trên đây là khái niệm và ví dụ cơ bản về định dạng JSON trong JavaScript. Hy vọng mọi người có thể áp dụng vào trong chương trình của mình. Mọi người hãy tiếp tục theo dõi các bài tiếp theo và cập nhật các bài tiếp theo về lập trình JavaScript trên tek4 nhé!
P/s: Cảm ơn mọi người đã tin tưởng tek4!
