Ở bài trước ta đã học về hàm JSON.parse() để đổi chuỗi JSON thành đối tượng Js. Bài này thì lại ngược lại. Ta sẽ học về hàm JSON.stringify() để đổi Js Object thành chuỗi JSON

1. Xử lý JavaScript Object thành chuỗi JSON

Công việc này hay còn được gọi là việc mã hóa dữ liệu dưới dạng JSON. Hàm JSON.stringify() giúp ta chuyển một đối tượng Js thành chuỗi để truyền đi. Đối tượng thì không chuyển qua mạng được, còn chuỗi thì chuyển được do ở định dạng text. Đối tượng hoặc giá trị Js từ mã của ta được chuyển đến máy chủ qua Ajax .

Do đó trước khi gửi đối tượng đến server hay ứng dụng khác, ta phải dùng hàm JSON.stringify() để đổi thành string .

Ví dụ: ta có đối tượng trong Js và sử dụng hàm JSON.stringify() để chuyển đổi nó thành một chuỗi

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Mặc dù, các đối tượng Js và chuỗi JSON trông khá giống nhau, nhưng chúng không hoàn toàn giống nhau đâu nhé. Đừng nhầm lẫn điều này.

Chú ý

Trong Js, tên thuộc tính của đối tượng có thể được đặt trong dấu nháy đơn ” hoặc dấu nháy kép “” . Hoặc ta có thể bỏ qua hoàn toàn các dấu nháy. Tuy nhiên, trong JSON, tất cả các tên thuộc tính phải được đặt trong dấu nháy kép “” .

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

Ta cũng có thể chuyển đổi các mảng trong Js thành chuỗi JSON.

Ví dụ: ta có một mảng và sử dụng hàm JSON.stringify() chuyển đổi nó thành chuỗi JSON

<!DOCTYPE html>
<html>
<body>

<h2>Tạo một chuỗi JSON từ một mảng JavaScript.</h2>
<p id="demo"></p>

<script>
const arr = ["PHP", "JavaScript", "Python", "Laptrinhtudau.com"];
const myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Chú ý

Không sử dụng hàm eval() để đánh giá dữ liệu JSON vì thông qua đó hacker có thể chèn mã Js độc hại vào trang web / ứng dụng của chính chúng ta.

3. Lưu trữ dữ liệu

Lưu trữ dữ liệu là việc làm thường xuyên. Khi lưu trữ dữ liệu, dữ liệu phải ở một định dạng nhất định và bất kể chọn lưu trữ ở đâu, văn bản luôn là một trong những định dạng tối ưu. JSON giúp ta có thể lưu trữ các đối tượng Js dưới dạng văn bản.

Ví dụ: Lưu trữ dữ liệu trong bộ nhớ cục bộ

<!DOCTYPE html>
<html>
<body>

<h2>Lưu trữ và truy xuất dữ liệu từ bộ nhớ cục bộ.</h2>
<p id="demo"></p>

<script>
// Lưu trữ dữ liệu:
const myObj = { name: "Thành", age: 19, city: "Hà Nội" };
const myJSON = JSON.stringify(myObj);
localStorage.setItem("testJSON", myJSON);

// Truy xuất dữ liệu:
let text = localStorage.getItem("testJSON");
let obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;
</script>

</body>
</html>

4. Xử lý ngoại lệ

4.1. Xâu chuỗi ngày

Trong JSON, đối tượng Date (ngày tháng) là không được phép. Tuy nhiên hàm JSON.stringify() sẽ chuyển đổi bất kỳ ngày nào thành chuỗi.

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify () chuyển đổi các đối tượng ngày tháng thành chuỗi.</h2>
<p id="demo"></p>

<script>
const obj = {name: "Thành", today: new Date(), city: "Hà Nội"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

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

3.2. Xâu chuỗi hàm

Trong JSON, các hàm không được phép làm giá trị đối tượng. Hàm JSON.stringify() sẽ xóa bất kỳ hàm nào khỏi đối tượng Js, cả key và value

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify() sẽ xóa bất kỳ hàm nào khỏi một đối tượng.</h2>
<p id="demo"></p>

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

</body>
</html>

Nhưng điều này có thể không xảy ra nếu ta chuyển đổi các hàm của thành chuỗi trước khi chạy hàm JSON.stringify()

<!DOCTYPE html>
<html>
<body>

<h2>JSON.stringify () sẽ xóa bất kỳ hàm nào khỏi một đối tượng.</h2>
<p>Chuyển đổi các hàm thành chuỗi để giữ chúng trong đối tượng JSON.</p>

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

<script>
const obj = {name: "Thành", age: function () {return 19;}, city: "Hà Nội"};
obj.age = obj.age.toString();
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;
</script>

</body>
</html>

Nếu ta 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 đổi chúng trở lại thành các hàm.

JSON.stringify trong JavaScript