MIS 腳印

記錄 IT 學習的軌跡

JSON 格式與 JavaScript 解析教學範例

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


簡介

什麼是 JSON

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

應用領域

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

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

JSON 與 XML 比較

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

JSON 格式

字串

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

物件

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

// 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":["網頁設計","撰寫文章"]}
 */

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

  • 如果該參數是一個 function(可接受物件的特性與值,可以自行決定如何轉換為 JSON 字串),則在序列化過程中,被序列化的值的每個屬性都會經過 function 的轉換和處理,return 值為 number、string、boolean,就會被加入 JSON 字串;為 object,則會遞迴呼叫指定的 function 進行轉換;若為 undefined,該特性就不會被加入 JSON 字串。
  • 如果該參數是一個 array,則只有包含在這個 array 中的屬性名才會被序列為 JSON 字串。
// 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":"小傑"}
 */

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

  • 如果是一個數值,則在字串化時每一級別會比上一級別多縮排該數值的空格(最多 10 個空格)。
  • 如果是一個字串(如 \t""),則每一級別會比上一級別多縮排該字串的空格。
// 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": [
        "網頁設計",
        "撰寫文章"
    ]
}
 */

JSON 字串解析成 JavaScript 物件

JSON.parse() 方法

JSON.parse() 方法可以將 JSON 字串解析成 JavaScript 物件,這樣就可使用 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]
);

/* 輸出:

小傑, 網頁設計
 */

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

// 宣告字串須使用 '' 括起來,否則就會變成是 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: ["網頁設計", "撰寫文章"]}
 */

eval() 函式

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

// 宣告字串須使用 '' 括起來,否則就會變成是 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]
);

/* 輸出:

小傑, 網頁設計
 */

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

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

使用 JavaScript for()

<table class="for-table">
	<thead>
		<tr>
			<th>姓名</th>
			<th>年齡</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>
var json = [{"name": "小傑", "age": 32},
            {"name": "小明", "age": 28}];
 
var forTable = document.querySelector( ".for-table tbody" );
var jsonSum = json.length;

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

使用 jQuery each()

<table class="each-table">
	<thead>
		<tr>
			<th>姓名</th>
			<th>年齡</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>
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>");
});
姓名年齡
小傑32
小明28

參考


“JSON 格式與 JavaScript 解析教學範例” 有 2 則迴響

  1. netsbig3 說:

    您好,我在cmd可順利的將json物件內容作換行,結果如下
    [
    {
    “booktitle”: “Leading”,
    “bookid”: “56353”,
    “bookauthor”: “Sir Alex Ferguson”
    },
    {
    “booktitle”: “How Google Works”,
    “bookid”: “73638”,
    “bookauthor”: “Eric Smith”
    },
    {
    “booktitle”: “The Merchant of Venice”,
    “bookid”: “37364”,
    “bookauthor”: “William Shakespeare”
    }
    ]
    PS D:WorkspaceExcel2JsonTestexcel-to-json-in-Node.js> node app.js
    running on 3000…
    uploadsfile-1513237256061.xlsx
    [
    {
    “booktitle”: “Leading”,
    “bookid”: “56353”,
    “bookauthor”: “Sir Alex Ferguson”
    },
    {
    “booktitle”: “How Google Works”,
    “bookid”: “73638”,
    “bookauthor”: “Eric Smith”
    },
    {
    “booktitle”: “The Merchant of Venice”,
    “bookid”: “37364”,
    “bookauthor”: “William Shakespeare”
    }
    ]

    但是要在網頁頁面呈現時,用相同的方卻無法換行,得到的結果如下
    “[n {n “booktitle”: “Leading”,n “bookid”: “56353”,n “bookauthor”: “Sir Alex Ferguson”n },n {n “booktitle”: “How Google Works”,n “bookid”: “73638”,n “bookauthor”: “Eric Smith”n },n {n “booktitle”: “The Merchant of Venice”,n “bookid”: “37364”,n “bookauthor”: “William Shakespeare”n }n]”

    請問造成上述結果的原因為何?

    • SmallJacky 說:

      1. 因為換行就是以符號 n 表示,不用特別換行。
      2. 盡量別自行串接 JSON、XML 等等資料交換格式,建議使用程式預設提供的函數,如 PHP 就有提供 json_encode() 與 json_decode() 將陣列編、解碼成 JSON,方便又能減少出錯率。

發表迴響