JSON: JSON.stringify()

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Cách sử dụng phổ biến của JSON là trao đổi dữ liệu đến/từ máy chủ web.

Khi gửi dữ liệu đến máy chủ web, dữ liệu phải là một chuỗi.

Để chuyển đổi một đối tượng JavaScript thành một chuỗi thì ta dùng JSON.stringify().

Xâu chuỗi một đối tượng JavaScript

Hãy tưởng tượng chúng ta có đối tượng này trong JavaScript:

var obj = { name: "John", age: 30, city: "New York" };

Ta sử dụng hàm JavaScript JSON.stringify() để chuyển nó thành một chuỗi:

var myJSON = JSON.stringify(obj);

Kết quả sẽ là một chuỗi nằm sau ký hiệu JSON.

myJSON bây giờ là một chuỗi và sẵn sàng được gửi đến một máy chủ. Ta xem ví dụ dưới đây:

<!DOCTYPE html>
<html>
<body>

<h2>Tạo chuỗi JSON từ đối tượng JavaScript.</h2>

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

<script>
  var obj = { name: "John", age: 30, city: "New York" };
  var myJSON = JSON.stringify(obj);
  document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Bạn sẽ học cách gửi JSON đến máy chủ trong bài hướng dẫn tiếp theo.

Xâu chuỗi một mảng JavaScript

Ta cũng có thể xâu chuỗi mảng JavaScript.

Hãy tưởng tượng chúng ta có mảng này trong JavaScript:

var arr = [ "John", "Peter", "Sally", "Jane" ];

Ta sử dụng hàm JavaScript JSON.stringify() để chuyển nó thành một chuỗi.

var myJSON = JSON.stringify(arr);

Kết quả sẽ là một chuỗi theo sau ký hiệu JSON.

myJSON bây giờ là một chuỗi và sẵn sàng được gửi đến một máy chủ:

<!DOCTYPE html>
<html>
<body>

<h2>Tạo chuỗi JSON từ một mảng JavaScript.</h2>

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

<script>
  var arr = [ "John", "Peter", "Sally", "Jane" ];
  var myJSON = JSON.stringify(arr);
  document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Bạn sẽ học cách gửi JSON đến máy chủ trong chương tiếp theo.

Ngoại lệ

Chuỗi ngày tháng

Trong JSON, các đối tượng ngày tháng không được phép sử dụng. Ta sử dụng hàm JSON.stringify() để chuyển đổi bất kỳ ngày tháng nào thành chuỗi.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify sẽ chuyển bất kỳ đối tượng date nào thành chuỗi.</h2>

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

<script>
  var obj = { name: "John", today: new Date(), city: "New York" };
  var myJSON = JSON.stringify(obj);
  document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Bạn có thể chuyển đổi chuỗi trở lại thành một đối tượng ngày tháng ở người nhận.

Chuỗi hàm

Trong JSON, các hàm cũng không được phép làm giá trị đối tượng.

Hàm JSON.stringify() sẽ loại bỏ bất kỳ hàm nào từ một đối tượng JavaScript, cả key và giá trị.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify sẽ loại bỏ bất kỳ hàm nào nếu có từ đối tượng JavaScript.</h2>

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

<script>
  var obj = { name: "John", age: function () {return 30;}, city: "New York" };
  var myJSON = JSON.stringify(obj);
  document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Điều này có thể được khắc phục nếu bạn chuyển đổi các hàm của mình thành chuỗi trước khi chạy hàm JSON.stringify().

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>Ta hãy chuyển các hàm thành dạng chuỗi trước khi dùng JSON.stringify.</h2>

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

<script>
  var obj = { name: "John", age: function () {return 30;}, city: "New York" };
  obj.age = obj.age.toString();
  var myJSON = JSON.stringify(obj);
  document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Nếu bạn gửi các hàm bằng JSON, các hàm sẽ mất phạm vi của chúng và người nhận sẽ phải sử dụng eval () để chuyển chúng trở lại thành các hàm.

Hỗ trợ trình duyệt

Hàm JSON.stringify() được sử dụng trong JavaScript (ECMAScript) và được hỗ trợ trong tất cả các trình duyệt chính.

Chrome Edge FireFox Safari Opera
Yes 8.0 3.5 4.0 10.0
» Tiếp: Đối tượng JSON
« Trước: JSON.parse()
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!