JS JSON

---

JS JSON 不包括函數、日期和 undefined（與 JS 差別）

---

儲存數據

把數據存儲在本地存儲中

myObj = { name:"Bill Gates",  age:62, city:"Seattle" };
myJSON =  JSON.stringify(myObj);

//存儲數據：
localStorage.setItem("testJSON", myJSON);
//接收數據：
text = localStorage.getItem("testJSON");

obj =  JSON.parse(text);
document.getElementById("demo").innerHTML = obj.name;

---

JSON.parse() 解析

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 中不允許日期對象，如果需要包含日期，寫爲字符串，再將其轉換回日期對象

1. 實例

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

2. 可以使用 JSON.parse() 函數的第二個參數，被稱爲 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);	//相當於不需要另寫new Data(text)
   	} else {
        	return value;	//不是birth就正常返回
   }});
   document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth;
   

解析函數

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

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.stringify() 轉換

使用 JS 函數 JSON.stringify() 將 JS 對象轉換爲字符串

日期字符串化

在 JSON 中，不允許日期對象。JSON.stringify() 函數將把任何日期轉換爲字符串

需要在接收端把字符串轉換回日期對象

函數字符串化

在 JSON 中，不允許函數作爲對象值，JSON.stringify() 函數將從 JS 對象刪除任何函數，包括鍵和值

需要在運行 JSON.stringify() 函數前已將函數轉換爲字符串：

var obj =  { "name":"Bill Gates", "age":function () {return 62;}, "city":"Seattle"};
obj.age = obj.age.toString();
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON;

---

JSON 對象

語法：{ "name":"Bill Gates", "age":62, "car":null }

訪問對象值

• 可以通過使用點號（.）來訪問對象值，x = myObj.name;
• 您也可以使用方括號（[ " " ]）來訪問對象值，x = myObj["name"];

後面加 = 就可以修改值

遍歷對象

通過使用 for-in 遍歷對象屬性

myObj =  { "name":"Bill Gates", "age":62, "car":null };
for (x in myObj) {
   document.getElementById("demo").innerHTML  += x;
}

在 for-in 循環中，請使用括號標記法來訪問屬性值
document.getElementById("demo").innerHTML += myObj[x];

嵌套的 JSON 對象

通過使用點號和括號訪問嵌套的 JSON 對象

myObj =  {
   "name":"Bill Gates",
   "age":62,
   "cars": {
	  "car1":"Porsche",
	  "car2":"BMW",
	  "car3":"Volvo"
   }
}

刪除對象屬性

使用 delete 關鍵詞來刪除 JSON 對象的屬性 delete myObj.cars.car1;

---

JSON 數組

JSON 對象中的嵌套數組

數組中的值也可以另一個數組，或者甚至另一個 JSON 對象：

myObj =  {
   "name":"Bill Gates",
   "age":62,
   "cars": [
	  { "name":"Porsche",  "models":[ "911", "Taycan" ] },
	  { "name":"BMW", "models":[ "M5", "M3", "X5" ] },
	  { "name":"Volvo", "models":[ "XC60", "V60" ] }
   ]
}

如需訪問數組內部的數組，需對每個數組使用 for-in 循環：

for (i in myObj.cars) {
    x += "<h1>" + myObj.cars[i].name  + "</h1>";
    for (j in myObj.cars[i].models) {
         x += myObj.cars[i].models[j];
    }
}

刪除數組項目

使用 delete 關鍵詞來刪除數組中的項目，delete myObj.cars[1];

---

JSON PHP

PHP 文件

通過使用 PHP 函數 json_encode()，PHP 中的對象，數組可轉換爲 JSON

<?php
$myObj->name = "Bill Gates";
$myObj->age = 62;
$myObj->city = "Seattle";

$myJSON = json_encode($myObj);

echo $myJSON;
?>

PHP 數據庫

JSONP

---