JSON: Đối tượng JSON


Đăng ký nhận thông báo về những video mới nhất

Cú pháp đối tượng

Ví dụ:

"name":"John""age":30"car":null }

Một đối tượng JSON được bao quanh bởi cặp ngoặc xoắn {}.

Các đối tượng JSON được viết trong các cặp key/value.

Khóa phải là chuỗi và giá trị phải là kiểu dữ liệu JSON hợp lệ (chuỗi, số, đối tượng, mảng, boolean hoặc null).

Khóa và giá trị được phân tách bằng dấu hai chấm.

Mỗi cặp khóa/giá trị được phân tách bằng dấu phẩy.

Truy cập giá trị đối tượng

Bạn 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 (.).

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<p>Access a JSON object using dot notation:</p>

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

<script>
  var myObj, x;
  myObj = {"name":"John", "age":30, "car":null};
  x = myObj.name;
  document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Bạn cũng có thể truy cập các giá trị đối tượng bằng cách sử dụng cặp ngoặc vuông ([]).

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<p>Access a JSON object using bracket notation:</p>

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

<script>
  var myObj, x;
  myObj = {"name":"John", "age":30, "car":null};
  x = myObj["name"];
  document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

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

Bạn có thể lặp qua các thuộc tính đối tượng bằng cách sử dụng vòng lặp for-in.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<p>How to loop through all properties in a JSON object.</p>

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

<script>
  var myObj, x;
  myObj = {"name":"John", "age":30, "car":null};
  for (x in myObj) {
    document.getElementById("demo").innerHTML += x + "<br>";
  }
</script>

</body>
</html>

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

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<p>Use bracket notation to access the property values.</p>

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

<script>
  var myObj, x;
  myObj = {"name":"John", "age":30, "car":null};
  for (x in myObj) {
    document.getElementById("demo").innerHTML += myObj[x] + "<br>";
  }
</script>

</body>
</html>

Các đối tượng JSON lồng nhau

Giá trị trong một đối tượng JSON có thể là một đối tượng JSON khác.

Ví dụ:

myObj = {
  "name":"John",
  "age":30,
  "cars": {
    "car1":"Ford",
    "car2":"BMW",
    "car3":"Fiat"
  }
 }

Bạn có thể truy cập các đối tượng JSON lồng nhau bằng cách sử dụng ký hiệu dấu chấm hoặc ký hiệu dấu ngoặc vuông.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<p>How to access nested JSON objects.</p>

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

<script>
  var myObj = {
    "name":"John",
    "age":30,
    "cars": {
    "car1":"Ford",
    "car2":"BMW",
    "car3":"Fiat"
    }
  }
  document.getElementById("demo").innerHTML += myObj.cars.car2 + "<br>";
  //or:
  document.getElementById("demo").innerHTML += myObj.cars["car2"];
</script>

</body>
</html>

Sửa đổi giá trị

Bạn có thể sử dụng ký hiệu dấu chấm để sửa đổi bất kỳ giá trị nào trong đối tượng JSON.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<p>How to modify values in a JSON object.</p>

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

<script>
  var myObj, i, x = "";
  myObj = {
    "name":"John",
    "age":30,
    "cars": {
    "car1":"Ford",
    "car2":"BMW",
    "car3":"Fiat"
    }
  }
  myObj.cars.car2 = "Mercedes";
  
  for (i in myObj.cars) {
    x += myObj.cars[i] + "<br>";
  }
  
  document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Bạn cũng có thể sử dụng ký hiệu dấu ngoặc để sửa đổi giá trị trong đối tượng JSON.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<p>How to modify values in a JSON object using the bracket notation.</p>

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

<script>
  var myObj, i, x = "";
  myObj = {
    "name":"John",
    "age":30,
    "cars": {
    "car1":"Ford",
    "car2":"BMW",
    "car3":"Fiat"
    }
  }
  myObj.cars["car2"] = "Mercedes";
  
  for (i in myObj.cars) {
    x += myObj.cars[i] + "<br>";
  }
  
  document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Xóa thuộc tính đối tượng

Sử dụng từ khóa delete để xóa thuộc tính khỏi đối tượng JSON.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<p>How to delete properties of a JSON object.</p>

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

<script>
  var myObj, i, x = "";
  myObj = {
    "name":"John",
    "age":30,
    "cars": {
    "car1":"Ford",
    "car2":"BMW",
    "car3":"Fiat"
    }
  }
  delete myObj.cars.car2;
  
  for (i in myObj.cars) {
    x += myObj.cars[i] + "<br>";
  }
  
  document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Nếu bạn có điều thắc mắc, bạn hãy comment cho V1Study để được giải đáp.
Bài viết này được chia sẻ bởi LongDT. Nếu bạn muốn chia sẻ bài viết, bạn hãy Đăng ký làm thành viên!
« Prev
Next »
Copied !!!