JSON.parse()

JSON 的常規用途是同 web 服務器進行數據傳輸。

在從 web 服務器接收數據時，數據永遠是字符串。

通過 JSON.parse() 解析數據，這些數據會成為 JavaScript 對象。

實例 – 解析 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 對象：

實例

<p id="demo"></p> 
<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_demo.txt

作為 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_demo_array.txt

例外

解析日期

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() 函數的首個瀏覽器版本：

Yes 8.0 3.5 4.0 10.0

對于更老的瀏覽器，以下地址中的 JavaScript 庫是可用的：

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