JSON .parse()
Công dụng phổ biến của JSON là trao đổi dữ liệu đến/từ máy chủ web.
Khi nhận dữ liệu từ máy chủ web, dữ liệu luôn ở dạng chuỗi.
Phân tích dữ liệu bằng JSON.parse()
và dữ liệu sẽ trở thành đối tượng JavaScript.
Ví dụ - Phân tích cú pháp JSON
Hãy tưởng tượng chúng tôi nhận được văn bản này từ một máy chủ web:
'{"name":"John", "age":30, "city":"New York"}'
Sử dụng hàm JavaScript JSON.parse()
để chuyển đổi văn bản thành đối tượng JavaScript:
const obj = JSON.parse('{"name":"John", "age":30, "city":"New
York"}');
Đảm bảo văn bản ở định dạng JSON, nếu không bạn sẽ gặp lỗi cú pháp.
Sử dụng đối tượng JavaScript trong trang của bạn:
Ví dụ
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = obj.name;
</script>
Hãy tự mình thử »Mảng dưới dạng JSON
Khi sử dụng JSON.parse()
trên JSON bắt nguồn từ một mảng, phương thức này sẽ trả về một mảng JavaScript, thay vì một đối tượng JavaScript.
Ví dụ
const text = '["Ford", "BMW", "Audi", "Fiat"]';
const myArr = JSON.parse(text);
Hãy tự mình thử » Ngoại lệ
Ngày phân tích cú pháp
Đối tượng ngày không được phép trong JSON.
Nếu bạn cần bao gồm ngày tháng, hãy viết nó dưới dạng chuỗi.
Bạn có thể chuyển đổi nó trở lại thành một đối tượng ngày sau:
Ví dụ
Chuyển đổi một chuỗi thành một ngày:
const text =
'{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
Hãy tự mình thử » Hoặc, bạn có thể sử dụng tham số thứ hai của hàm JSON.parse()
, được gọi là reviser .
Tham số reviver là một hàm kiểm tra từng thuộc tính trước khi trả về giá trị.
Ví dụ
Chuyển đổi một chuỗi thành một ngày bằng cách sử dụng hàm phục hồi :
const text =
'{"name":"John", "birth":"1986-12-14", "city":"New York"}';
const obj = JSON.parse(text, function (key, value) {
if
(key == "birth") {
return new
Date(value);
} else {
return value;
}
});
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
Hãy tự mình thử »Chức năng phân tích cú pháp
Các hàm không được phép trong JSON.
Nếu bạn cần bao gồm một hàm, hãy viết nó dưới dạng một chuỗi.
Bạn có thể chuyển đổi nó trở lại thành một hàm sau:
Ví dụ
Chuyển đổi một chuỗi thành một hàm:
const text =
'{"name":"John", "age":"function () {return
30;}", "city":"New York"}';
const obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " +
obj.age();
Hãy tự mình thử » Bạn nên tránh sử dụng các hàm trong JSON, các hàm sẽ mất phạm vi và bạn sẽ phải sử dụng eval()
để chuyển đổi chúng trở lại thành hàm.