1. Quy tắc về cú pháp của JSON

Cú pháp JSON bắt nguồn từ cú pháp của ký hiệu đối tượng Js:

  • Dữ liệu nằm trong cặp Name/Value
  • Dữ liệu được phân tách bằng dấu phẩy
  • Dấu {} để lưu giữ các đối tượng
  • Dấu [] để lưu giữ các mảng

2. Cú pháp của JSON

Cú pháp cở bản của JSON sẽ như sau:

{Danh sách cặp NAME/VALUE}
[NAME:VALUE],.., [NAME:VALUE]}

Dữ liệu của JSON sẽ được viết dưới dạng cặp name/value hay còn gọi là key/value . Mỗi cặp name/value sẽ bao gồm tên trường(đặt trong dấu ngoặc kép) theo sau nó là dấu hai chấm, theo sau là giá trị(value)

"name":"Thành"

Chú ý

Tên trong JSON sẽ yêu cầu dấu ngoặc kép. Với Js thì nó không yêu cầu điều này.

Định dạng JSON sẽ gần giống đối tượng Js. Trong JSON thì key phải là chuỗi và được viết trong dấu ngoặc kép. Nhưng trong Js thì key có thể là chuỗi số hoặc tên định danh

{name:"Thành"}//Js

3. Giá trị của JSON

Trong JSON thì các giá trị(value) phải là một trong các kiểu dữ liệu sau:

  • Chuỗi
  • Số
  • Mảng
  • Boolean
  • Đối tượng JSON
  • Null

Trong Js giá trị cũng có thể là kiểu trên nhưng đồng thời nó cũng có thể là bất kỳ biểu thức Js hợp lệ nào khác như:

  • Hàm
  • Ngày tháng
  • Undefined

Ví dụ:

Kiểu chuỗi – String : được bao bởi cặp ngoặc kép

{"sitename":"laptrinhtudau.com"}

Kiểu số – Number : số dạng số nguyên hoặc dạng số thực

{"pointX": 90, "pointY": 9.68}

Kiểu đối tượng JSON

{"Site":{"Ten":"laptrinhtudau","Domain":"com"}}

Kiểu mảng – Array : một mảng các kiểu dữ liệu như mảng số nguyên, mảng ký tự,…

{ "mangsonguyen":[1, 2, 3] }
 
{ "mangword":["Js", "PHP", "JSON"] }

Kiểu Boolean : có thể nhận các giá trị kiểu Boolean của Js là true hoặc false

{"isMale":true }

Kiểu Null

{"sitename":null}

4. JSON sử dụng cú pháp JavaScript

Vì cú pháp JSON bắt nguồn từ ký hiệu đối tượng Js nên ta chỉ cần rất ít phần mềm bổ sung để hoạt động với JSON trong Js. Với Js ta có thể tạo một đối tượng và gán dữ liệu cho nó như sau:

person = {name:"Thành", age:19, city:"Hà Nội"};

Truy cập như thuộc tính của đối tượng Js

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

<script>
const myObj = {name:"Thành", age:19, city:"Hà Nội"};
document.getElementById("demo").innerHTML = myObj.name;
</script>

Hay truy cập như phần tử của mảng:

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

<script>
const myObj = {name:"Thành", age:19, city:"Hà Nội"};
document.getElementById("demo").innerHTML = myObj["name"];
</script>

Nó cũng có thể gán nó như một thuộc tính của đối tượng Js

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

<script>
const myObj = {name:"Thành", age:19, city:"Hà Nội"};
myObj.name = "Nam";
document.getElementById("demo").innerHTML = myObj.name;
</script>

Gán như phần tử của mảng:

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

<script>
const myObj = {name:"Thành", age:19, city:"Hà Nội"};
myObj["name"] = "Nam";
document.getElementById("demo").innerHTML = myObj.name;
</script>

Tương tự, giống như cách các đối tượng Js có thể được viết dưới dạng JSON, các mảng Js cũng có thể được viết dưới dạng JSON. Các tệp JSON có đuôi là .json và loại MIME cho văn bản JSON là “application / json”

Ta có thể sử dụng vòng lặp for thông thường của Js với sử dụng phương thức key của Object trong Js để truy cập tới tất cả thuộc tính (Name hoặc Key) của đối tượng JSON:

// Sử dụng phương thức keys của đối tượng Object để lấy về danh sách các key của đối tượng JSON
var arrKey = Object.keys(jsonObj);
for (var i=0;i&lt;arrKey.length;i++)
{
 // truy cập tới key của JSON qua: arrKey[i]
 // truy cập tới value của JSOn qua: jsonObj[arrKey[i]])
 alert("Key:=" + arrKey[i] + "value:=" + jsonObj[arrKey[i]]);
}

Trong Js còn hỗ trợ thêm một vòng lặp for…in giúp ta duyệt tất cả thuộc tính (Name hoặc Key) của đối tượng JSON một cách dễ dàng hơn nữa:

for (x in jsonObj) {
 // x là tên thuộc tính
 alert("Property Name:=" + x);
 // jsonObj[x] là giá trị của thuộc tính JSON
 alert("Value:=" +jsonObj[x]);
}