Hike News
Hike News

JSON 與 Json-server 的基本使用

JSON

JSON ( JavaScript Object Notation ) 以簡單的物件和文字架構出來的資料，所以在瀏覽、使用、編輯修改都是比較容易的。

  • 維基百科對 JSON 作的說明
    • JSON 資料格式與語言無關
    • 以易於讓人閱讀的文字為基礎
    • 用來傳輸由屬性值或者序列性的值組成的資料物件
    • NoSQL 資料庫
    • MIME 類型是 application/json
    • 編碼 UTF-8
    • 副檔名是 .json
    • 說明取至：JSON - 維基百科，自由的百科全書 - Wikipedia

JSON 格式

  • 資料類型

    • 數字：除了數字不可在前面多加 0 ，也不能是數字以外的符號、文字之外，小數點、負數是可以的。
    • 字串
    • 布林值
    • 陣列
    • 物件
    • 也可加入 Emoji 字元 
    1
    2
    3
    { "face": "😂" }
    // or
    { "face": "\uD83D\uDE02" }

  • JSON 的組成可以看作是一個群體、團體，舉例來說的話， JSON 是一個家庭，家庭裡有多少成員，每個成員的個人資料 … 等

  • 寫成 JSON 的話就是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
  "home": "阿花家",
  "tel": "04-23456789",
  "address": "台中市台灣大道1號",
  "member": [
    {
      "name": "阿花",
      "part": "主人",
      "age": 20
    },{
      "name": "忠犬",
      "part": "狗",
      "age": 3
    },{
      "name": "花貓",
      "part": "貓",
      "age": 5
    }
  ]
}

基本編輯 Json 方式

當 JSON 資料取得後，發現要更新修改某一個值時就可用到

以下用 阿花家 為例

1
2
3
4
5
6
let aFlower = {
  "home": "阿花家",
  "tel": "04-23456789",
  "address": "台中市台灣大道1號",
  "member": 3
}
  • 修改值的方式，就是找到屬性位置後賦予新的值
    • 下方就以阿花家生了 5 隻小狗為例，所以成員就會從原本的 3 個升級到了 8 個，可喜可賀。
1
2
3
4
5
6
7
8
9
10
11
12
let aFlower = {
  "home": "阿花家",
  "tel": "04-23456789",
  "address": "台中市台灣大道1號",
  "member": 3
}
aFlower.member =  8

// {
//   ...
//   member: 8
// }
  • 增加新的屬性和值，其實就是新增之前所沒有的屬性後並賦予值，若是之前就有屬性的話，這值就只是在作修改。
    • 以下方阿花家多了傳真，所以要新增傳真號碼
1
2
3
4
5
6
7
8
9
10
11
12
13
let aFlower = {
  "home": "阿花家",
  "tel": "04-23456789",
  "address": "台中市台灣大道1號",
  "member": 8
}
aFlower.fax =  "04-98765432"

// {
//   ...
//   fax: "04-98765432",
//   tel: "04-23456789"
// }

如果覺得傳真不過也是電話，所以就想說 JSON 一定知道這是要多加一筆的啦~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let aFlower = {
  "home": "阿花家",
  "tel": "04-23456789",
  "address": "台中市台灣大道1號",
  "member": 8
}
aFlower.tel =  "04-98765432"

// {
//   "address": "台中市台灣大道1號",
//   "home": "阿花家",
//   "member": 8,
//   "tel": "04-98765432"
// }

結果就是電話被更新了

  • 刪除屬性和值
    • 這時阿花覺得太丟臉了又想不起來原本的電話是幾號時，只好先刪除有電話這回事。
1
2
3
4
5
6
7
8
9
10
11
12
13
let aFlower = {
  "home": "阿花家",
  "tel": "04-98765432",
  "address": "台中市台灣大道1號",
  "member": 8
}
delete aFlower.tel

// Object {
//   "address": "台中市台灣大道1號",
//   "home": "阿花家",
//   "member": 8
// }

心想：看來阿花的記性不大好啊！

  • 物件轉字串
    • 有些時侯傳送資料時，會需要將原本是物件格式的 JSON 資料轉成字串，這時就可以用 JSON.stringify()
1
2
3
4
5
6
7
8
let json = {
  "home": "台中市台灣大道1號",
  "home": "阿花家",
  "member": 8
}
let json_str = JSON.stringify(json)

// "{'address':'台中市台灣大道1號','home':'阿花家','member':8}"
  • 字串轉物件
    • 當收到是 JSON 寫法的字串時就可用 JSON.parse() 轉成物件格式使用，若真的是字串時就會出錯
1
2
3
4
5
6
7
8
let json_str = '{"address":"台中市台灣大道1號","home":"阿花家","member":8}';
let json = JSON.parse(json_str);

// {
//   "home": "台中市台灣大道1號",
//   "home": "阿花家",
//   "member": 8
// }

JSON 檔除了可以匯入到 JavaScript 練習使用外，也可以使用套件作練習測試

Json-server 套件

這個套件會用 npm 下載，需要安裝在全域，也是可以只裝在資料夾內，只是可能會有部分功能是沒效果，這點需要注意，還是以使用情形安裝為主。

安裝

1
npm install -g json-server

開啟 server

1
json-server --watch db.json

接著就可以用瀏覽器開啟 http://localhost:3000/ 就可以來連線測試

用阿花家的練習

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "family": {
    "home": "阿花家",
    "tel": "04-23456789",
    "address": "台中市台灣大道1號"
  },
  "member": [
    {
      "name": "阿花",
      "part": "主人",
      "age": 20
    },{
      "name": "忠犬",
      "part": "狗",
      "age": 3
    },{
      "name": "花貓",
      "part": "貓",
      "age": 5
    }
  ]
}

在大括號 {} 內的屬性，都可以作為取值的依據使用

例如要看屬性 family 的值時，就連線到

打開 http://localhost:3000/family 就會出現

1
2
3
4
5
{
  "home": "阿花家",
  "tel": "04-23456789",
  "address": "台中市台灣大道1號"
}

換成 http://localhost:3000/member 就會出現

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[
  {
    "name": "阿花",
    "part": "主人",
    "age": 20
  },
  {
    "name": "忠犬",
    "part": "狗",
    "age": 3
  },
  {
    "name": "花貓",
    "part": "貓",
    "age": 5
  }
]

參考

JSON - 維基百科，自由的百科全書 - Wikipedia

線上編輯工具 - JSON Editor

JSON中文說明