HTTP Networking(6) JSON

發表於 更新於 分類於
使用 JSON 傳遞資料

JSON格式

JSON 就是字串版的 JavaScrip 物件格式，是由美國程式設計師道格拉斯·克羅克福特構想和設計的一種輕量級資料交換格式。其內容由屬性和值所組成。
因為JavaScrip 的物件只存在專案的變數中，當我們想將物件向外傳遞時(例如使用 http request)，需要先將資料轉成 JSON 格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// JSON 格式
{
    "movies": [
        {
            "id": 1,
            "genre": "Action",
            "title": "Iron Man",
            "director": "Jon Favreau"
        },
        {
            "id": 2,
            "genre": "Action",
            "title": "The Avengers",
            "director": "Joss Whedon"
        }
    ]
}

將JSON轉換成物件

要在 js 中使用 json 的資料，要先將json轉換成 js 的物件。
js的 fetch() api 有提供轉換的方法

1
2
const resp = await fetch(...)
const javascriptObjectResponse = await resp.json()

並不只用於 JavaScrip

雖然 JSON 的全名是 JavaScript Object Notation，但不代表 JSON 只用於 JavaScript。
其他程式語言如 Java、Node.js、C# 也會使用。

JSON.STRINGIFY()

JSON.stringify() 方法會帶入一個 JavaScrip 的物件，並將其轉成 JSON格式。當要將物件轉成json 傳到server 或資料庫時常用。

JSON.parse()

JSON.parse() 則是將 JSON 格式轉成 JavaScrip 的物件。

1
2
3
4
5
const json = '{"title": "Avengers Endgame", "Rating":4.7, "inTheaters":false}';
const obj = JSON.parse(json)

console.log(obj.title)
// Avengers Endgame

XML

XML(Extensible Markup Language)，和 JSON 一樣也是一個資料交換格式。
XML 的格式有點像 HTML，以下為 範例

1
2
3
4
5
6
<root>
  <id>1</id>
  <genre>Action</genre>
  <title>Iron Man</title>
  <director>Jon Favreau</director>
</root>

上面的 xml 格式若用 json 表達如下

1
2
3
4
5
6
{
  "id": "1",
  "genre": "Action",
  "title": "Iron Man",
  "director": "Jon Favreau"
}

用 xml 或 json ?

xml 和 json 的功能都是資料交換的格式，但 json 更易懂，並在現代程式語言中有更好的支援。