Day 16 - 結構化的呈現數據 - JSON 格式介紹

哈囉大家好，我是古古。

在上一篇文章中，我們有去要如何使用 @RequestMapping，將 url 路徑對應到 Spring Boot 程式的方法上。

那麼這篇文章，我們就接著來介紹，要如何透過 JSON 格式，結構化的去呈現返回給前端的數據。

回顧：到目前為止的返回數據 #

在上一篇文章的最後面，我們有添加了一個新的 product() 方法，並且為他添加對應的 url 路徑 /product，程式如下：

如果我們觀察一下的話，可以發現在這個 product() 方法中，他的 return 返回值是使用「字串」來表達「第一個是蘋果、第二個是橘子」的資訊，而這其實是非常人類語言的表達方式，因此對於電腦的程式語言來說，是很難辨別的。

所以為了讓程式語言可以更有效率的讀取數據、呈現數據，因此 JSON 這個格式就被發明出來了！

什麼是 JSON？ #

JSON 是一種數據呈現的格式，而他的目的，就是用「更簡單、更直覺的方式去呈現數據」，因此當我們使用了 JSON 之後，就可以在前後端之間更有效率的傳遞數據，所以就不用再和上面一樣，藥用人類的語言去形容複雜的數據了。也因為 JSON 格式的應用非常廣泛，因此熟練掌握 JSON 格式的應用，可以說是對實務上非常有幫助！

舉例來說，當我們使用了 JSON 之後，就可以將「我的學號是 123，名字是 Judy」這句話，改成用下面的 JSON 格式來呈現：

{
    "id": 123,
    "name": "Judy"
}

JSON 格式介紹 #

大概了解了 JSON 的好處之後，接下來我們也可以來看一下，要如何才能撰寫出 JSON 格式的數據。

使用 {} 表示 object（物件） #

首先在 JSON 格式中，可以使用一組大括號 {} 來表示一個 object（物件），譬如說當我們寫出下面這一段 JSON 格式的數據時，就表示我們 new 出了一個 object：

{
    //....
}

Key 和 Value 的概念 #

而在寫好一對大括號 {} 之後，我們就可以在大括號 {} 裡面，去定義「key 和 value 的配對」，這個 key 的地位就等同於是去宣告一個 Java 中的變數，而 value 就是去設定這個變數的值。

舉例來說，假設我們在大括號裡面加上一行程式 "id": 123，就表示我們去創建了一組 key-value 的配對，其中 key 就是 id，而 value 就是冒號右邊的 123。

{
    "id": 123
}

所以在上面這行程式中，"id": 123 就是表示「有一個變數 id，他的值為 123」的意思。

所以在 JSON 格式中，我們就可以透過 key-value 的寫法，去新增許多組 key-value 出來了。

新增多組 Key-Value #

延續上面的例子，現在在 JSON 的大括號中，我們已經寫上一組 "id": 123 的 key-value 了，而 "id": 123 所表達的邏輯意義，就是「我的 id 的值為 123」的意思。

如果這時候，我們想要在大括號中再去新增一組 key-value 的話，那首先我們就要先在 "id": 123 的後面加上一個逗點 ,，接著換行，然後輸入第二組 key-value 配對的值，譬如說寫上 "name": "Judy"，用來表示「我的名字為 Judy」。

{
    "id": 123,
    "name": "Judy"
}

所以在上面這個寫法中，"name": "Judy" 中的 key 就是 name，表示我們創建了一個變數叫做 name，然後這個 name 變數的值，就是冒號右邊的 Judy。因此我們就可以用 "name": "Judy" 這一行寫法，去表達「我的名字為 Judy」的意義。

而當我們實作到這裡，如果現在回頭看這整個 JSON 的話，目前在這整個 JSON 裡面就表達了兩個資訊，分別是 "id": 123（我的 id 為 123），以及 "name": "Judy"（我的名字為 Judy）這兩個意義了！

因此透過 JSON 格式的寫法，就可以用更簡單的結構去呈現數據，因此就可以簡化開發，進而提升前後端溝通的效率了！

使用 JSON 的注意事項 #

在使用 JSON 時，有一個很重要的注意事項要留意，就是 「在 JSON 中的所有 key，都必須要加上雙引號 " " 來框住才可以」。

像是在我們前面所撰寫的 JSON 例子，就有在 id 和 name 這兩個 key 的前後，使用一對雙引號，把這個 key 給框起來：

{
    "id": 123,
    "name": "Judy"
}

這個是在撰寫 JSON 格式時，一定要注意的細節！因此大家後續在實作上，就要多加小心這個部分。

JSON 格式所支援的類型 #

透過上述的介紹，現在我們知道，在 JSON 中是會透過 key-value 的配對，去創建許多組的變數和他對應的值的。

而在這些值中，JSON 支援以下幾種類型，分別是：

因此大家在使用上，就可以根據不同的需求，去為 key 設定不同類型的 value 值了。

補充：JSON 中的 List 概念 #

在 JSON 中，value 的值除了可以使用基本類型的整數、浮點數、字串…等之外，value 的值也是可以設定成一個 List 的，因此我們就可以像 Java 一樣，在 List 裡去添加許多值（用法類似於 Java 中的 List）。

而要在 JSON 中創建一個 List 的話，就只要寫上一對中括號 []，這樣就可以創建一個 List 出來了，因此我們後續就可以在這個 List 裡面，去填上我們想要放的內容了。

舉例來說，當我們寫出下面這個 JSON 格式時：

{
    "appleList": ["apple1", "apple2", "apple3"]
}

就表示我們去定義了一個 key 叫做 appleList，並且這個 appleList 所對應的 value 值為 List 類型，同時在這個 List 裡面，我們就存放了 3 個值，分別是 apple1、apple2、以及 apple3。

所以透過這一行 "appleList": ["apple1", "apple2", "apple3"] 的寫法，就可以表達出「在這個 appleList 中有三個蘋果，並且第一個蘋果叫做 apple1、第二個蘋果叫做 apple2、第三個蘋果叫做 apple3」的資訊了。

補充：因為篇幅的關係，所以本文中沒辦法完整介紹 JSON 中的所有內容，僅能做一個簡單的入門介紹而已，因此大家如果後續想要更了解 JSON 的話，建議可以再上網查詢「巢狀 JSON」的相關用法。

最後，讓我們回到最一開始的問題 #

在了解了如何撰寫 JSON 格式之後，最後我們可以回到這篇文章最一開始的問題：要如何把 product() 方法所返回的「第一個是蘋果、第二個是橘子」的人類語言，改成用 JSON 的格式來傳遞？

所以現在我們就可以運用前面所介紹的 JSON 用法，將「第一個是蘋果、第二個是橘子」的句子，改寫成下面的 JSON 格式：

{
    "productList": ["蘋果", "橘子"]
}

因此透過上面這一行 "productList": ["蘋果", "橘子"] 的寫法，我們就可以表達出「在這個 productList 中有兩個商品，並且第一個商品叫做蘋果、第二個商品叫做橘子」的資訊了！

總結 #

這篇文章我們先介紹了什麼是 JSON 格式，接著也介紹了 JSON 格式中的 key-value 的寫法、以及 JSON 所支援的類型，讓大家熟悉一下 JSON 格式的寫法。

而在我們了解了 JSON 格式的用法之後，接著下一篇文章，我們就會回到 Spring Boot 程式中，嘗試去改寫一下 MyController 中的 product() 方法，將他所回傳的返回值改寫成 JSON 格式，那我們就下一篇文章見啦！

補充：本文是擷取自我開設的線上課程 Java 工程師必備！Spring Boot 零基礎入門 的內容，如果你想了解更多的 Spring Boot 的用法，歡迎參考課程簡介 （輸入折扣碼「HH202504KU」即可享 85 折優惠）。