初識 JSON 格式與資料轉換

第一次認識到 JSON，是在學 python 爬蟲的時候，抓取到大量格式明確的資料再進行處理，那時候就常聽到老師說:「我們現在拿到的是 JSON 格式的資料」。

後來開始接觸前端，串接 API 的時候，又再度和 JSON 格式相遇，接下來將會整理對 JSON 格式的初步認識。

JSON（JavaScript Object Notation )，JavaScript物件表示法。以純文字為基礎，方便資料儲存和交換的格式。由於 JSON 是一個純文字資料，所以當沒有對 JSON 格式進行轉換之前，這就是一個字串格式。

JSON 可以應用在不只一個程式語言裡，從上面的例子可以看到，包含 Python、PHP 和 Javascript 的多種程式語言都能支援這個格式。

建立 JSON 字串

JSON Data Format 資料格式 中提到:

JSON 支援以下的資料格式：
字串 (string)
數值 (number)
布林值 (boolean)
空值 (null)
物件 (object)
陣列 (array)

而 JSON 中，這些資料格式的規範如下:

1. 字串 (string) : 必須用雙引號 "" ;

2. 數值 (number) : 可為正負整數或浮點數 ;

3. 布林值 (boolean) : true / false ;

4. 空值 (null) : null ;

5. 物件 (object) :

   • 以 {} 為始末寫入資料
   • name : value 成對，並用 : 分隔

   • 多個 name : value 之間用 , 分隔

     { "name": value, "name": value }
     

6. 陣列 (array) :

   • 以 [] 為始末寫入資料

   • 多個 value 之間用 , 分隔

     [value, value]
     

範例 ( 影片網站會員資料 ):

{
     "name": "Ding",
     "age": 33,
     "member": true,
     "favorite": [
         "Sherlock",
         "Hospital Playlist",
         "Shinya Shokudo"
     ]
 }

JSON 資料轉換

當拿取或上傳資料的時候，會需要進行 JSON 資料的格式轉換，如同上文提到 JSON 是純文字資料，當我們需要對資料取值的時候則必須將其 Javascript 物件化；當我們要上傳物件格式的資料時，則要轉成 JSON 格式。
以下是針對需求的 Javascript JSON 資料轉換語法 :

1. JSON 字串轉為 JS 物件: JSON.parse()
2. JS 物件轉為 JSON 字串: JSON.stringify()

範例 ( JSON.parse() ):

const jsonString = '[ \
  { \
    "name": "Anna", \
    "age": 33, \
    "member": true, \
    "favorite": [ \
      "Sherlock", \
      "Hospital Playlist", \
      "Shinya Shokudo" \
    ] \
  }, \
  { \
    "name": "Ben", \
    "age": 36, \
    "member": true, \
    "favorite": [ \
      "The Good Doctor", \
      "Designated Survivor" \
    ] \
  }\
]'

const result = JSON.parse(jsonString)
console.log(result[1]) // 印出 Ben 的會員資料

const {name} = result[0]
console.log(name) // Anna

範例 ( JSON.stringify() ):

const member = { 
    "name": "Anna",
    "age": 33,
    "member": true,
    "favorite": [
      "Sherlock",
      "Hospital Playlist",
      "Shinya Shokudo"
    ]
}
const result = JSON.stringify(member) //轉為 JSON 純文字資料

JSON.stringify() 可帶入參數，根據 JSON.stringify() MDN 文件 :

JSON.stringify(value[, replacer[, space]])

第二個參數可以放進一個 function 或 array:

1. arary: 於 array 中的屬性名稱才會被轉為 JSON 字串

    const member = { 
        "name": "Anna",
        "age": 33,
        "member": true,
        "favorite": [
          "Sherlock",
          "Hospital Playlist",
          "Shinya Shokudo"
        ]
    }
   
    const result = JSON.stringify(member, ["name", "member"])
    console.log(result) // {"name":"Anna","member":true}
   

2. function: return number、string 或 boolean 可以被轉為 JSON 字串，return undefind 不會被加入。

        const member = { 
            "name": "Anna",
            "age": 33,
            "member": true,
            "favorite": [
              "Sherlock",
              "Hospital Playlist",
              "Shinya Shokudo"
            ]
        }
   
        const result = JSON.stringify(member, (key, value) => {
          if (key === "favorite") return undefined
          return value
        })
        console.log(result) // {"name":"Anna","age":33,"member":true}
   

第三個參數可以放進一個正整數來控制縮排間距，並會自動換行，上限為10，最小為1。如果放入字串，則用字串取代空格。

最後則補充在 PHP語言中也有其轉換的語法:

1. json_decode() : 將 PHP 變數資料轉為 JSON 格式字串
2. json_encode() : 將 JSON 格式字串轉為 PHP 變數資料