1. JSON là gì?

JSON là chữ viết tắt của Javascript Object Notation. Đây là một dạng dữ liệu tuân theo một quy luật nhất định mà hầu hết các ngôn ngữ lập trình hiện nay đều có thể đọc được. Bạn có thể sử dụng lưu nó vào một file, một record trong CSDL rất dễ dàng. JSON là một định dạng tiêu chuẩn trong trao đổi dữ liệu nhẹ, nhanh chóng và dễ dàng tạo (generate) và phân tích (parse) dễ dàng sử dụng và truy vấn hơn XML rất nhiều.

Vì định dạng JSON là một định dạng dựa trên văn bản, nó có thể dễ dàng được gửi đến và từ một máy chủ và được sử dụng làm định dạng dữ liệu bởi bất kỳ ngôn ngữ lập trình nào.

Ví dụ:

{
"employees":[
  {"firstName":"Thành", "lastName":"Nguyễn"},
  {"firstName":"Nam", "lastName":"Chu"},
  {"firstName":"Sơn", "lastName":"Phùng"}
]
}

Việc sử dụng JSON nhằm giảm thời gian truy xuất dữ liệu và dung lượng gói tin. Khi 1 request từ client gửi lên server, server trả về dưới dạng JSON, phía client sẽ từ các keys lấy ra các values cần thiết.

2. Cú pháp của JSON

JSON tuân theo một quy luật nhất định mà hầu hết các ngôn ngữ lập trình hiện nay đều có thể đọc được, cấu trúc từ các cặp {key: value} khá mạch lạc và dễ hiểu. Cú pháp của JSON cũng thừa hưởng từ cú pháp của JS Object, cho nên nó cũng gần giống nhau. Tuy nhiên giữa chúng vẫn có những điểm khác biệt:

Key : phải được đóng trong dấu ngoặc kép
Value : chỉ được phép là những kiểu dữ liệu cơ bản (Number, String, Boolean, Array, Object, null), không được phép là function , date , undefined hoặc biểu thức tính toán

Một cặp Key/Value gồm tên trong dấu ngoặc kép, theo sau là dấu hai chấm và sau đó là giá trị.

"firstName":"Thành"

Đối tượng JSON thì được viết bên trong dấu ngoặc nhọn, và nó có thể chứa nhiều cặp key/value .

{"firstName":"Thành", "lastName":"Nguyễn"}

Mảng JSON được viết trong dấu ngoặc vuông. Một mảng có thể chứa nhiều đối tượng JSON .

"employees": [ 
    {"firstName":"Thành", "lastName":"Nguyễn"}, 
    {"firstName":"Nam", "lastName":"Chu"}, 
    {"firstName":"Sơn", "lastName":"Phùng"} 
]

Một ví dụ tổng hợp cụ thể hơn nhé:

var jsonObject = {
  "name": "cat",
  "age": 2
};

var jsonArray = {
  "employees": [
    {"firstName":"Thành", "lastName":"Nguyễn"}, 
    {"firstName":"Nam", "lastName":"Chu"}, 
    {"firstName":"Sơn", "lastName":"Phùng"}
  ]
};

var jsonString = "{"employees":[{"firstName":"Thành","lastName":"Nguyễn"},{"firstName":"Nam","lastName":"Chu"},{"firstName":"Sơn","lastName":"Phùng"}]}";

3. Chuyển đổi văn bản JSON thành đối tượng JavaScript

Cách sử dụng phổ biến của JSON là đọc dữ liệu từ máy chủ web và hiển thị dữ liệu trong một trang web. Để đơn giản, điều này có thể được chứng minh bằng cách sử dụng một chuỗi làm đầu vào. Đầu tiên, ta sẽ tạo một chuỗi Js có chứa cú pháp JSON:

let text = '{ "employees" : [' +
'{ "firstName":"Thành" , "lastName":"Nguyễn" },' +
'{ "firstName":"Nam" , "lastName":"Chu" },' +
'{ "firstName":"Sơn" , "lastName":"Phùng" } ]}';

Sau đó, sử dụng hàm tích hợp Js JSON.parse() để chuyển đổi chuỗi thành một đối tượng Js:

const obj = JSON.parse(text);

Cuối cùng, sử dụng đối tượng Js mới trong trang của bạn:

<p id="demo"></p>

<script>
let text = '{"employees":[' +
'{"firstName":"Thành","lastName":"Nguyễn" },' +
'{"firstName":"Nam","lastName":"Chu" },' +
'{"firstName":"Sơn","lastName":"Phùng" }]}';

const obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

Đây là mình giới thiệu cho các bạn trước. Nếu có gặp ta cũng sẽ không bị thấy lạ lẫm quá nhiều. Các bạn có thể xem cụ thể tại JSON trong JavaScript nhé!