JSON.parse()

Công dụng thông thường của JSON là truyền dữ liệu với máy chủ web.

Khi nhận dữ liệu từ máy chủ web, dữ liệu luôn là chuỗi.

qua JSON.parse() Phân tích dữ liệu, những dữ liệu này sẽ trở thành đối tượng JavaScript.

Mô hình – Phân tích JSON

Hãy tưởng tượng rằng chúng ta nhận được đoạn văn bản này từ máy chủ web của chúng ta:

'{ "name":"Bill Gates", "age":62, "city":"Seattle"}'

Hãy sử dụng hàm JavaScript JSON.parse() Chuyển đổi văn bản thành đối tượng JavaScript:

var obj = JSON.parse('{ "name":"Bill Gates", "age":62, "city":"Seattle"}');

Hãy đảm bảo rằng văn bản này được viết dưới định dạng JSON, nếu không sẽ xảy ra lỗi ngữ pháp.

Hãy sử dụng đối tượng JavaScript trong trang của bạn:

Mẫu

<p id="demo"></p> 
<script>
 document.getElementById("demo").innerHTML = obj.name + ", " + obj.age; 
</script>

Thử ngay

JSON từ máy chủ

Bạn có thể yêu cầu JSON từ máy chủ bằng cách sử dụng yêu cầu AJAX.

Chỉ cần phản hồi từ máy chủ được viết bằng định dạng JSON, bạn có thể phân tích chuỗi thành đối tượng JavaScript.

Mẫu

Hãy sử dụng XMLHttpRequest để lấy dữ liệu từ máy chủ:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
        myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

Thử ngay

Xem json_demo.txt

như một mảng JSON

khi sử dụng JSON được衍生 từ mảng JSON.parse() sau đó phương pháp này sẽ trả về mảng JavaScript,而不是 đối tượng JavaScript.

Mẫu

JSON trả về từ máy chủ là mảng:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function()  {
    if (this.readyState == 4 && this.status == 200) {
        myArr =  JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML  = myArr[0];
    }
};
xmlhttp.open("GET", "json_demo_array.txt", true);
xmlhttp.send();

Thử ngay

Xem json_demo_array.txt

Trừ phiếu

Giải mã ngày tháng

JSON không cho phép đối tượng ngày tháng.

Nếu bạn cần bao gồm ngày tháng, hãy viết nó như là chuỗi.

Sau đó bạn có thể chuyển nó lại thành đối tượng ngày tháng:

Mẫu

Chuyển chuỗi thành ngày tháng:

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Thử ngay

hoặc bạn có thể sử dụng JSON.parse() Tham số thứ hai của hàm, được gọi là reviver.

this reviver Parameter là hàm, nó sẽ kiểm tra từng thuộc tính trước khi trả về giá trị.

Mẫu

Chuyển chuỗi thành ngày tháng, sử dụng hàm reviver:

var text = '{ "name":"Bill Gates", "birth":"1955-10-28", "city":"Seattle"}';
var 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;

Thử ngay

Giải mã hàm

JSON không cho phép hàm.

Nếu bạn cần bao gồm hàm, hãy viết nó như là chuỗi.

Sau đó bạn có thể chuyển nó lại thành hàm:

Mẫu

Chuyển chuỗi thành hàm:

var text = '{ "name":"Bill Gates", "age":"function () {return 62;}", "city":"Seattle"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");
document.getElementById("demo").innerHTML = obj.name + ", " +  obj.age();

Thử ngay

Bạn nên tránh sử dụng hàm trong JSON, hàm sẽ mất đi phạm vi của chúng và bạn cần phải sử dụng eval() Chuyển đổi chúng trở lại hàm.

Hỗ trợ trình duyệt

Tất cả các trình duyệt phổ biến và tiêu chuẩn ECMAScript (JavaScript) mới nhất đều bao gồm JSON.parse() Hàm:

Số trong bảng dưới đây chỉ định việc hỗ trợ hoàn toàn JSON.parse() Phiên bản trình duyệt đầu tiên của hàm:

Có 8.0 3.5 4.0 10.0

Đối với trình duyệt cũ hơn, các thư viện JavaScript trong địa chỉ sau là có sẵn:

https://github.com/douglascrockford/JSON-js