1. Đối tượng JSON

Đối tượng JSON là một tập hợp các cặp name/value (hay gọi là key/value ) không theo thứ tự. Một đối tượng JSON được đặt trong các dấu ngoặc nhọn. Nó bắt đầu bằng { và kết thúc bằng } . Các đối tượng JSON được viết trong cặp key/value mà trong đó:

  • Key phải là chuỗi khác nhau và value là các giá trị JSON hợp lệ như: string , number , object , array , boolean , null
  • Key và Value được phân tách nhau bằng dấu hai chấm
  • Mỗi cặp Key/Value lại được ngăn cách nhau bằng dấu phẩy

Ví dụ: đây là một chuỗi JSON

'{"name":"Thành", "age":19, "car":null}'

Bên trong chuỗi JSON có một đối tượng JSON

{"name":"Thành", "age":19, "car":null}

2. Tạo một đối tượng JavaScript từ JSON

Ta có thể tạo một đối tượng Js từ một đối tượng JSON như sau

<!DOCTYPE html>
<html>
<body>

<h2>Tạo một đối tượng Js từ JSON</h2>
<p id="demo"></p>

<script>
const myObj = {"name":"Thành", "age":19, "car":null};
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

Thông thường, ta tạo một đối tượng Js bằng cách phân tích cú pháp chuỗi JSON:

<!DOCTYPE html>
<html>
<body>

<h2>Tạo một JSON phân tích cú pháp đối tượng</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"Thành", "age":19, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

3. Truy cập giá trị của đối tượng

Ta có thể truy cập các giá trị đối tượng bằng cách sử dụng ký hiệu dấu chấm (.) như sau:

<!DOCTYPE html>
<html>
<body>

<h2>Truy cập một đối tượng JavaScript</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"Thành", "age":19, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;
</script>

</body>
</html>

Ta cũng có thể truy cập các giá trị đối tượng bằng cách sử dụng ký hiệu ngoặc vuông [] như sau:

<!DOCTYPE html>
<html>
<body>

<h2>Truy cập một đối tượng JavaScript</h2>
<p id="demo"></p>

<script>
const myJSON = '{"name":"Thành", "age":19, "car":null}';
const myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj["name"];
</script>

</body>
</html>

4. Vòng lặp một đối tượng

Ta có thể lặp qua các thuộc tính đối tượng bằng vòng lặp for-in

<!DOCTYPE html>
<html>
<body>

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

<script>
const myJSON = '{"name":"Thành", "age":19, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += x + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Trong vòng lặp for-in, ta hãy sử dụng ký hiệu ngoặc vuông để truy cập các giá trị thuộc tính

<!DOCTYPE html>
<html>
<body>

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

<script>
const myJSON = '{"name":"Thành", "age":19, "car":null}';
const myObj = JSON.parse(myJSON);

let text = "";
for (const x in myObj) {
  text += myObj[x] + ", ";
}
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Ngoài ra ta cũng có đối tượng JSON lồng nhau. Ví dụ

{  
     "firstName": "Thành",
     "lastName": "Nguyễn",
     "age": 19,
     "address" : {
         "streetAddress": "Ba Vì",
         "city": "Hà Nội",
         "state": null,
         "postalCode": "100000"
     }
 }