JavaScript JSON 解析
在本教程中，你將學習如何在 JavaScript 中編碼和解碼 JSON 資料。
什麼是 JSON
JSON 代表 JAVA SCRIPT Object Notation。JSON 是一種非常輕量級的資料交換格式，用於伺服器和客戶端之間的資料交換，可以快速輕鬆地解析和生成。
與 XML 一樣，JSON 也是一種基於文字的格式，易於編寫且易於理解，但與 XML 不同，JSON 資料結構佔用少於 XML 版本的頻寬。JSON 基於兩個基本結構：
- 物件： 這被定義為鍵/值對的無序集合（即
key:value）。每個物件以左大括號{開頭，以右大括號結束}。多個鍵/值對由逗號,分隔。 - 陣列： 這被定義為有序的值列表。陣列以左括號
[開頭，以右括號]結束。值以逗號,分隔。
在 JSON，屬性名稱或鍵總是字串，而值可以是 string ，number ，true 或者 false ，null 甚至是 object 或者 array。字串必須用雙引號 " 括起來，並且可以包含轉義字元，如 \n，\t 和 \。JSON 物件可能如下所示：
{
"book": {
"name": "Harry Potter and the Goblet of Fire",
"author": "J. K. Rowling",
"year": 2000,
"genre": "Fantasy Fiction",
"bestseller": true
}
}
而 JSON 陣列的示例如下所示：
{
"fruits": [
"Apple",
"Banana",
"Strawberry",
"Mango"
]
}
提示： 資料交換格式是一種文字格式，用於在不同平臺和作業系統之間交換或交換資料。JSON 是 Web 應用程式中最流行，最輕量級的資料交換格式。
用 JavaScript 解析 JSON 資料
在 JavaScript 中，你可以使用 JSON.parse() 方法輕鬆解析從 Web 伺服器接收的 JSON 資料。此方法解析 JSON 字串並構造字串描述的 JavaScript 值或物件。如果給定的字串無效 JSON，你將收到語法錯誤。
假設我們從 Web 伺服器收到以下 JSON 編碼的字串：
{"name": "Peter", "age": 22, "country": "United States"}
現在，我們可以簡單地使用 JavaScript JSON.parse() 方法將此 JSON 字串轉換為 JavaScript 物件，並使用點符號（.） 訪問單個值，如下所示：
// Store JSON data in a JS variable
var json = '{"name": "Peter", "age": 22, "country": "United States"}';
// Converting JSON-encoded string to JS object
var obj = JSON.parse(json);
// Accessing individual value from JS object
alert(obj.name); // Outputs: Peter
alert(obj.age); // Outputs: 22
alert(obj.country); // Outputs: United States
請檢視有關PHP JSON 解析的教程，瞭解如何從 Web 伺服器返回 JSON 資料作為響應，以及如何使用 PHP 對伺服器端的 JSON 資料進行編碼/解碼。
在 JavaScript 中解析巢狀的 JSON 資料
JSON 物件和陣列也可以巢狀。JSON 物件可以任意包含其他 JSON 物件、陣列、巢狀陣列、JSON 物件陣列等。以下示例將向你展示如何解析巢狀的 JSON 物件並提取 JavaScript 中的所有值。
/* Storing multi-line JSON string in a JS variable
using the new ES6 template literals */
var json = `{
"book": {
"name": "Harry Potter and the Goblet of Fire",
"author": "J. K. Rowling",
"year": 2000,
"characters": ["Harry Potter", "Hermione Granger", "Ron Weasley"],
"genre": "Fantasy Fiction",
"price": {
"paperback": "$10.40", "hardcover": "$20.32", "kindle": "$4.11"
}
}
}`;
// Converting JSON object to JS object
var obj = JSON.parse(json);
// Define recursive function to print nested values
function printValues(obj) {
for(var k in obj) {
if(obj[k] instanceof Object) {
printValues(obj[k]);
} else {
document.write(obj[k] + "<br>");
};
}
};
// Printing all the values from the resulting object
printValues(obj);
document.write("<hr>");
// Printing a single value
document.write(obj["book"]["author"] + "<br>"); // Prints: J. K. Rowling
document.write(obj["book"]["characters"][0] + "<br>"); // Prints: Harry Potter
document.write(obj["book"]["price"]["hardcover"]); // Prints: $20.32
在 JavaScript 中將資料編碼為 JSON
有時，在 Ajax 通訊期間，需要將程式碼中的 JavaScript 物件或值傳輸到伺服器。JavaScript 為此提供了將 JavaScript 值轉換為 JSON 字串的方法 JSON.stringify()，如下所示：
Stringify 一個 JavaScript 物件
以下示例將向你展示如何將 JavaScript 物件轉換為 JSON 字串：
// Sample JS object
var obj = {"name": "Peter", "age": 22, "country": "United States"};
// Converting JS object to JSON string
var json = JSON.stringify(obj);
alert(json);
上面示例的輸出將如下所示：
{"name":"Peter","age":22,"country":"United States"}
注意： 儘管 JavaScript 和 JSON 物件看起來非常相似，但它們並不完全相同。例如，在 JavaScript 中，物件屬性名稱可以用單引號（'...'）或雙引號（...） 括起來，或者可以完全省略引號。但是，在 JSON 中，所有屬性名稱必須用雙引號括起來。
將一個 JavaScript 陣列轉化為字串
同樣，你可以將 JavaScript 陣列轉換為 JSON 字串，如下所示：
// Sample JS array
var arr = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
// Converting JS array to JSON string
var json = JSON.stringify(arr);
alert(json);
上面示例的輸出將如下所示：
["Apple","Banana","Mango","Orange","Papaya"]
警告： 不要使用 eval() 函式來評估 JSON 資料（例如，包括 JSON 字串中的函式定義並使用 eval() 方法將它們轉換回可執行函式），因為它允許攻擊者將惡意 JavaScript 程式碼注入你的應用程式。