JSON 教學、格式

什麼是 JSON? Ajax 與 JSON 又有什麼關係呢!本篇文章將介紹什麼是 JSON 和應用領域以及如何建立 JSON 格式,並以範例說明如何使用 JavaScript 處理 JSON 教學。

json-teaching-format_00

簡介

什麼是 JSON

  • JSON(JavaScript Object Notation,JavaScript 物件表示法)
  • JSON 是一種以純文字為基礎,來儲存和交換簡單結構的輕量級「資料交換格式」(類似 XML
  • JSON 獨立於語言
  • JSON 具有自我描述性,更易於人理解、閱讀和編寫,同時也易於機器解析和生成
  • JSONXML(eXtensible Markup Language,可延伸標記式語言)更小、更快且更易解析

應用領域

JSON 最開始被廣泛的應用於 Web 的開發,隨著 Web 2.0 的方興未艾,JSON 在 Web 資料傳輸領域占有重要的地位。

JSON 因小巧與瀏覽器內建快速解析支援,因此較適用於網路資料傳輸領域,而目前最常用在 Ajax(Asynchronous JavaScript and XML,非同步的 JavaScript 與 XML 技術)的資料傳輸。

JSONXML 比較

JSONXML 最大的不同在於 XML 是一個完整的標記語言,而 JSON 不是。這使得 XML 在程式判讀上需要比較多的功夫。主要的原因在於 XML 的設計理念與 JSON 不同。XML 利用標記語言的特性提供了絕佳的延展性(如 XPath),在資料儲存,擴充功能及高階檢索方面具備對 JSON 的優勢,而 JSON 則由於比 XML 更加小巧,以及瀏覽器的內建快速解析支援,使得其更適用於網路資料傳輸領域。

JSON 字串(String)格式

JSON 字串

JSON 字串可以包含物件(Object)或陣列(Array)資料

物件(Object)與陣列(Array)可互相包含,例如 {"array": [{"object": "object"}]}

物件(Object)

  • 一個物件以 { 開始,並以 } 結束,來寫入資料
  • name 為字串,必須以 "" 括起來
  • namevalue 之間使用 : 分隔
  • 多個 name:value 之間使用 , 分隔
{"name": value, "name": value}

陣列(Array)

  • 一個陣列以 [ 開始,並以 ] 結束,來寫入資料
  • 多個 value 之間使用 , 分隔
[value, value]

物件和陣列的值(Value)

物件和陣列的值如下

  • 物件(Object):{}
  • 陣列(Array):[]
  • 字串(String):以 "" 括起來
  • 數值(number):0-9 的數字組合(整數、小數或負數)
  • 布林(boolean):truefalse
  • 空值(Null):null
{"array": ["string", 10, 1.0, -1, true, false, null]}

JSON 字串範例

例如一個會員的基本資料,使用 JSON 字串表示如下:

{
    "number": "1020501",
    "name": "小傑",
    "age": 32,
    "sex": "M",
    "interest": [
        "網頁設計",
        "撰寫文章"
    ]
}

使用 JavaScript 處理 JSON

物件序列化成 JSON 字串

JSON.stringify() 方法可以將 JavaScript 物件序列化成 JSON 字串

<script type="text/JavaScript">
// JavaScript 物件
var member = {
    "number": "1020501",
    "name": "小傑",
    "age": 32,
    "sex": "M",
    "interest": [
        "網頁設計",
        "撰寫文章"
    ]
};

console.log(
    JSON.stringify(member)  // 序列化成 JSON 字串
);

/* 輸出:

"number":"1020501","name":"小傑","age":32,"sex":"M","interest":["網頁設計","撰寫文章"]}
 */
</script>

JSON.stringify() 方法可指定第二個參數

  • 如果該參數是一個 function(可接受物件的特性與值,可以自行決定如何轉換為 JSON 字串),則在序列化過程中,被序列化的值的每個屬性都會經過 function 的轉換和處理,return 值為 number、string、boolean,就會被加入 JSON 字串;為 object,則會遞迴呼叫指定的 function 進行轉換;若為 undefined,該特性就不會被加入 JSON 字串
  • 如果該參數是一個 array,則只有包含在這個 array 中的屬性名才會被序列為 JSON 字串
<script type="text/JavaScript">
// JavaScript 物件
var member = {
    "number": "1020501",
    "name": "小傑",
    "age": 32,
    "sex": "M",
    "interest": [
        "網頁設計",
        "撰寫文章"
    ]
};

// 使用第二個參數 function 方式,排除 age 特性不被序列為 JSON 字串
console.log(
    JSON.stringify(member, function(key, value) {
        if (key === "age")
            return undefined;

        return value;
    })
);

/* 輸出:

{"number":"1020501","name":"小傑","sex":"M","interest":["網頁設計","撰寫文章"]}
 */

// 使用第二個參數 array 方式,指定要被序列為 JSON 字串的特性
console.log(
    JSON.stringify(member, ["number", "name"])
);

/* 輸出:

{"number":"1020501","name":"小傑"}
 */
</script>

JSON.stringify() 方法可指定第三個參數,來控制結果字串的縮排間距,並會自動換行

  • 如果是一個數值,則在字串化時每一級別會比上一級別多縮排該數值的空格(最多 10 個空格)
  • 如果是一個字串(如 \t、" “……),則每一級別會比上一級別多縮排該字串的空格
<script type="text/JavaScript">
// JavaScript 物件
var member = {
    "number": "1020501",
    "name": "小傑",
    "age": 32,
    "sex": "M",
    "interest": [
        "網頁設計",
        "撰寫文章"
    ]
};

// 使用第三個參數「數值」方式,指定縮排
console.log(
    JSON.stringify(member, null, 2)
);

/* 輸出:

{
  "number": "1020501",
  "name": "小傑",
  "age": 32,
  "sex": "M",
  "interest": [
    "網頁設計",
    "撰寫文章"
  ]
}
 */

// 使用第三個參數「字串」方式,指定縮排
console.log(
    JSON.stringify(member, null, "\t")
);

/* 輸出:

{
    "number": "1020501",
    "name": "小傑",
    "age": 32,
    "sex": "M",
    "interest": [
        "網頁設計",
        "撰寫文章"
    ]
}
 */
</script>

JSON 字串解析成 JavaScript 物件

JSON.parse() 方法

JSON.parse() 方法可以將 JSON 字串解析成 JavaScript 物件,這樣就可使用 JavaScript 進行操作了。

<script type="text/JavaScript">
// 宣告字串須使用 '' 括起來,否則就會變成是 JavaScript 物件(Object)了
// 如在不同行必須在每行結尾處加上 \,否則會產生 SyntaxError
var jsonString = '{         \
    "number": "1020501",    \
    "name": "小傑",         \
    "age": 32,              \
    "sex": "M",             \
    "interest": [           \
        "網頁設計",         \
        "撰寫文章"          \
    ]                       \
}';

// 將 JSON 字串解析成 JavaScript 值,這樣就可使用 JavaScript 進行操作了
var member = JSON.parse(jsonString);

// 取得物件的指定值
console.log(
    member.name + ', ' +
    member.interest[0]
);

/* 輸出:

小傑, 網頁設計
 */
</script>

JSON.parse() 方法可指定第二個參數 function 用來轉換解析出的屬性值,return 的值決定最後在物件上的特性值;若 return 的值為 undefined,就不會包括該特性。

<script type="text/JavaScript">
// 宣告字串須使用 '' 括起來,否則就會變成是 JavaScript 物件(Object)了
// 如在不同行必須在每行結尾處加上 \,否則會產生 SyntaxError
var jsonString = '{         \
    "number": "1020501",    \
    "name": "小傑",         \
    "age": 32,              \
    "sex": "M",             \
    "interest": [           \
        "網頁設計",         \
        "撰寫文章"          \
    ]                       \
}';

// 使用第二個參數 function 方式,排除 age 特性不被包括在物件
var member = JSON.parse(jsonString, function(key, value) {
    if (key === "age")
        return undefined;

    return value;
});

// 取得物件
console.log(
    member
);

/* 輸出:

Object {number: "1020501", name: "小傑", sex: "M", interest: ["網頁設計", "撰寫文章"]}
 */
</script>
一些較舊的瀏覽器內建如果沒有支援 JSON 方法,可至 JSON 官方網站 點擊 JSON2.js 下載後,載入至文件使用,以獲得 JSON 支援

eval() 函式

eval() 函式可以將一個 JavaScript 代碼字串求值成特定的物件。字串前後須加上刮號 eval("(" + string + ")"),用來告知 Javascript 這是個物件描述,而不是要執行的 statement。

<script type="text/JavaScript">
// 宣告字串須使用 '' 括起來,否則就會變成是 JavaScript 物件(Object)了
// 如在不同行必須在每行結尾處加上 \ 告知這是接續下一行,否則會產生 SyntaxError
var jsonString = '{         \
    "number": "1020501",    \
    "name": "小傑",         \
    "age": 32,              \
    "sex": "M",             \
    "interest": [           \
        "網頁設計",         \
        "撰寫文章"          \
    ]                       \
}';

// 使用 eval() 將字串求值成特定的物件(字串前後須加上刮號,用來告知這不是要執行的 statement),這樣就可使用 JavaScript 進行操作了
var member = eval("(" + jsonString + ")");

// 取得物件的指定值
console.log(
    member.name + ', ' +
    member.interest[0]
);

/* 輸出:

小傑, 網頁設計
 */
</script>
eval() 函式可執行字串中的 Javascript 程式碼,所以容易有 XSS 攻擊的危險,因此較不建議使用
可相容較舊版本的瀏覽器

走訪(遍歷)JavaScript 物件、陣列

各別使用 JavaScript for() 與 jQuery each() 兩種方式,在走訪(遍歷)時,將資料帶入表格(table)。

必須載入 jQuery

使用 JavaScript 的 for()

<!-- HTML -->
<table class="for-table" border="1">
	<thead>
		<tr>
			<th>姓名</th>
			<th>年齡</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>

<!-- 載入 jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- Code -->
<script type="text/JavaScript">
var json = [{"name": "小傑", "age": 32},
			{"name": "小明", "age": 28}];

var forTable = $(".for-table tbody");
var jsonSum = json.length;
for (var i = 0; i < jsonSum; i++) {
	forTable.append("<tr>" +
						"<td>" + json[i].name + "</td>" +
						"<td>" + json[i].age + "</td>" +
					"</tr>");
}
</script>
姓名 年齡
小傑 32
小明 28

使用 jQuery 的 each()

<!-- HTML -->
<table class="each-table" border="1">
	<thead>
		<tr>
			<th>姓名</th>
			<th>年齡</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>

<!-- 載入 jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- Code -->
<script type="text/JavaScript">
var json = [{"name": "小傑", "age": 32},
			{"name": "小明", "age": 28}];

var eachTable = $(".each-table tbody");
$.each(json, function(index, element) {
	eachTable.append("<tr>" +
						"<td>" + element.name + "</td>" +
						"<td>" + element.age + "</td>" +
					"</tr>");
});
</script>
姓名 年齡
小傑 32
小明 28

發表迴響