JavaScript- JSON公開資料

本文总阅读量次

JSON簡介

JSON(全名JavaScript Object Notation)是受到JavaScript物件實體語法啟發的傳輸格式，比起使用XML傳輸資料，JSON格式在檔案大小上更為輕量，也是現在主流的傳輸格式。

  • 就是 JavaScript Object Notation，JavaScript 物件表示法
  • JSON 為 純文字 格式
  • JSON 具自我描述性、易於人理解、閱讀和編寫，同時也易於機器解析和生成
  • JSON 較 XML (eXtensible Markup Language) 小、快且更易解析

JSON格式

JSON 字串可以包含 物件 (Object) 和 陣列 (Array)
Tips: 物件與陣列可互相包含，如：{“array”: [{“object”: “object”}]}

JSON格式轉換的兩種語法

*Stringify(): 將物件序列化成 JSON 字串

一般來說，如果要用JSON格式來溝通，都要將原先是物件(含陣列)格式轉成JSON看得懂的字串格式，這種情況就可以使用stringify()物件轉字串，再傳至後端處理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 宣告一個 user object
let user = {
  "name": "OAwan", 
  "sex" : "Male",
  "age" : 27,
  "married" : false,
  "skills"  : [
    "RubyOnRails",
    "JavaScript",
    "Scss"
  ]
}

console.log(
  JSON.stringify(user, ["name", "sex"], 2);
);
/* 輸出：
{
  "name":"OAwan",
  "sex":"Male"
}
*/

*Parse(): 將 JSON 字串解析成 JavaScript 物件

從後端處理過後或者是網路上取得的JSON格式，如要經過JS處理呈現在網頁上，此時就可以用parse（）轉成JS看得懂的物件格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 宣告一個 JSON 字串
let userJSON = `{
  "name":"OAwan",
  "sex":"Male",
  "age":"27",
  "married":"未婚",
  "skills":[
    "RubyOnRails",
    "JavaScript",
    "Scss"
  ]
}`;

// 透過 JSON.parse() 解析 JSON 字串
let user = JSON.parse(userJSON);
// 取得物件值
console.log(
  user.name + ', ' + user.skills[1]
);
/* 輸出：
OAwan, JavaScript
*/

實作練習

假設我們從後端接到一個JSON字串格式

1
'{"name":"Simon","isF2E":"true"}'

使用AJAX接到此JSON格式後，現在想要取當中的name來渲染至頁面上

1
2
var data = '{"name":"Simon","isF2E":"true"}';
console.log(data.name+'挑戰第14天')

因為JSON被引號包著，現在是字串格式，這時JSON.parse()就派上用場

1
2
3
4

var data = '{"name":"Simon","isF2E":"true"}'
var data2 = JSON.parse(data);
console.log(data2.name+'挑戰第14天')

結果顯示”Simon”挑戰第14天，順利取得資料