例項 – 解析 JSON

請想象一下我們從 web 伺服器接收到這段文字：

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

請使用 JavaScript 函式JSON.parse()把文字轉換為 JavaScript 物件：

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

請確保這段文字以 JSON 格式書寫，否則會出現語法錯誤。

請在您的頁面中使用 JavaScript 物件：

例項

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

來自伺服器的 JSON

您能夠通過使用 AJAX 請求從伺服器請求 JSON。

只要伺服器的響應是用 JSON 格式編寫的，你可以將字串解析成 JavaScript 物件。

例項

請使用 XMLHttpRequest 從伺服器獲取資料：

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();

作為 JSON 的陣列

在對衍生自陣列的 JSON 使用JSON.parse()後，此方法將返回 JavaScript 陣列，而不是 JavaScript 物件。

例項

從伺服器返回的 JSON 是陣列：

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();

例外

解析日期

JSON 中不允許日期物件。

如果您需要包含日期，請寫為字串。

之後您可以將其轉換回日期物件：

例項

把字串轉換為日期：

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;

或者您可以已使用JSON.parse()函式的第二個引數，被稱為reviver。

這個reviver引數是函式，在返回值之前，它會檢查每個屬性。

例項

將字串轉換為日期，使用 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;

解析函式

JSON 中不允許函式。

如果您需要包含函式，請把它寫作字串。

稍後您可以把它轉換回函式：

例項

把字串轉換為函式：

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();

您應該避免在 JSON 中使用函式，函式會丟失它們的作用域，而且您還需要使用eval()把它們轉換回函式。

瀏覽器支援

所有主流瀏覽器以及最新的 ECMAScript (JavaScript) 標準均包含JSON.parse()函式：

下表中的數字指定了完全支援JSON.parse()函式的首個瀏覽器版本：