Tìm hiểu hàm JSON.parse() trong JSON

Một ứng dụng phổ biến của JSON là trao đổi dữ liệu đến / từ một máy chủ web. Khi nhận dữ liệu từ một máy chủ web, dữ liệu luôn là một chuỗi. Phân tích cú pháp dữ liệu với JSON.parse(), và dữ liệu trở thành một đối tượng JavaScript.

Ví dụ – Phân tích JSON

Giả dụ bạn 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 một đối tượng JavaScript:

var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}');

Đảm bảo văn bản được viết bằng định dạng JSON, nếu không lỗi cú pháp sẽ xuất hiện.

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

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

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

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 một yêu cầu AJAX. Miễn là 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 một đối tượng JavaScript.

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) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();

Mảng như JSON

Khi sử dụng JSON.parse() trên một JSON có nguồn gốc từ một mảng, phương thức sẽ trả về một mảng JavaScript, thay vì một đối tượng JavaScript.

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

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

Một số trường hợp ngoại lệ

Phân tích Ngày tháng

Các đối tượng ngày tháng không được phép trong JSON. Nếu bạn cần đưa vào một ngày, viết nó như một chuỗi. Bạn có thể chuyển đổi nó trở lại thành một đối tượng ngày tháng như sau:

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);

document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;

Hoặc, bạn có thể sử dụng tham số thứ hai của hàm JSON.parse(), được gọi là reviver. Thông số reviver là một hàm kiểm tra mỗi thuộc tính, trước khi trả lại giá trị.

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

var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
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;

Các hàm phân tích cú pháp

Hàm không được phép dùng trong JSON. Nếu bạn cần sử dụng một hàm, viết nó như một chuỗi. Bạn có thể chuyển đổi nó trở lại vào một hàm sau:

var text = '{ "name":"John", "age":"function () {return 30;}", "city":"New York"}';
var obj = JSON.parse(text);
obj.age = eval("(" + obj.age + ")");

document.getElementById("demo").innerHTML = obj.name + ", " + obj.age();

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

Trình duyệt hỗ trợ

Hàm JSON.parse() tương thích trong tất cả các trình duyệt chính và theo tiêu chuẩn ECMAScript (JavaScript) mới nhất:

• Firefox 3.5
• Internet Explorer 8
• Chrome
• Opera 10
• Safari 4