# JSON introduction
- JSON 是一種簡單易懂的資料結構。JSON 結構化資料利於資料儲存及互通交換。
- JSON 資料人跟電腦都可很容易讀取、了解、編輯、處理。
- JSON 是 JavaScript Object Notation 的縮寫。這是資工專家訂出來，資工人專長在電腦，但又要讓人覺得很厲害，因此訂出許多讓人覺得很酷(莫名其妙)的術語。簡單而言， **JSON 是 key-value pair 與Array(陣列) 這兩種基礎結構組合而成的資料**。
- Key value pair: 成對的大括號{} 可包含多個 key/value 組合。 key value 以冒號隔開 ':'。以逗號 ',' 區隔下一組資料。如下範例:
```json=
{"itemName":"Product1", "Amount": 3 }
```
- Array: 陣列當中通常包含多組同屬性的資料。如下範例:
```json=
[{"itemName":"product1", "Amount": 3 },
{"itemName":"product2", "Amount": 1 }]
```
如上範例，中括號 [] 陣列當中包含兩組大括號 {} 包含的 key-value pairs，陣列當中每一筆資料以逗號 (,)分隔。
- Key-value pair 與陣列組合成 JSON 資料，以此描述一組意義明確的資料，如下範例:
```json=
{ "buyerName": "John",
"orderDate": "2022-06-24",
"orderItems": [{"itemName":"Product1", "Amount": 3 },
{"itemName":"Product2", "Amount": 1 }]
}
```
上述 JSON 範例大括號{}第一層包含 buyerName, orderDate, orderItems 三組 key-value pair。buyerName, orderDate 的 value 是字串。而 orderItems 的 value 是陣列，此陣列每一筆資料又是一組 {} 包含的 key-value pairs。上述 JSON 範例可描述一筆訂單，清楚指定訂購者 (buyerName)，訂購日期(orderDate)、訂購的商品與數量(orderItems)。
## 定義 JSON 資訊處理模板
- JSON 資料結構人跟電腦都可很容易讀取、了解、編輯、處理。如上範例，可用來描述一份訂單，以利程式處理。
- **在許多應用領域，僅需求者熟悉處理流程及要處理的資訊(程式開發人員不清楚)**。 需求者可用 JSON 描述其專業領域要處理的資訊，以利資訊人員依循開發系統。如下範例:
```json=
{ "dataType": "Order",
"id": "orderID267",
"status": "requested",
"buyer": {"id":"A001", "name":"John" },
"orderDate": "2022-06-24",
"orderItems": [{"itemName":"product1", "ProductID" :"p123", "price":100, "Amount": 3 },
{"itemName":"product2", "ProductID" :"p333", "price":500, "Amount": 1 }]
}
```
上述範例可用於電子商務。買家選購後，可產生上述訂單資料。此 JSON 資料各欄位規格及用途進一步說明:
- datatype: 指定此 JSON 的類型， "Order" 代表訂單。另可能有其他 datatype，如買家、商家、商品、付款等
- id: 指定此筆訂單的唯一碼，以利程式處理。 其他類型的 JSON 資料，如許多買家、貨品、商家、付款紀錄等，通常也會有多筆資料，因此每組 JSON 資料應給與一唯一碼。
- status: 表示此訂單的處理狀態，可能包含買家下訂單、商家處理中、已出貨、已付款、撤銷、異常等狀態
- orderDate: 買家下訂單時間。可能還需增加其他時間記錄欄位，如出貨時間、到貨時間等
- buyer: 買家資料，內含id, name 以利識別。可由另一 JSON data 描述此 buyer 進一步的資料，如住址、聯絡資訊、註冊日期等。此訂單當中僅紀錄 Buyer 的 id，若需要可由此 id 查到 buyer 的詳細資料。
- orderItems: 條列訂單項目(陣列)。每個項目包含:
-- itemName : 商品名稱
-- ProductID : 商品 id
-- Amount: 購買數量
## JS read JSON data
- JS 解析 JSON 資料範例
```htmlembedded=
<html>
<head> </head>
<body></body>
<script>
// 定義一個 JSON 物件
var Jas = {
"resourceType": "Patient",
"name": [{
"use": "official",
"text": "林帶玉",
"family": "林",
"given": ["帶玉"]
}],
"gender": "female",
"birthDate": "1773-01-21",
};
// 將 Jas 物件 birthDate 資料指定給 ret 變數
var ret = Jas.birthDate;
alert(ret); // 網頁彈出顯示 ret 結果
</script>
</html>
```
- 上述範例用到 JavaScript 程式基礎語法； JS var 設定變數與物件，JS alert 在提示視窗呈現資訊，以及 [JS 處理 JSON 物件](https://www.w3schools.com/js/js_json.asp)。有人可協助準備十分鐘 JS 快速上手線上教材嗎?
### 執行 JSON.html 程式範例
- 在 VS code 開發環境，可選擇 r_JSON.html，按滑鼠右鍵，點選 open with live 執行範例程式
- 執行後，在瀏覽器會看到如下結果:
### Pratice
- 若要使用 JS 從上述範例取得 "family" 標籤的資料("林")，範例程式第 18 行要如何修改?
## JS set JSON data
- JS 在 JSON 模板中設定資料範例
- 執行 w_JSON.html 範例程式
- 瀏覽器會看到的結果如下:
### Pratice
- 若要將"林帶玉"改為"林黛玉"，"帶玉"改為"黛玉"，範例程式要如何修改
## JSON 在健康醫療的應用
- 類似上述概念，國際標準 FHIR 在健康醫療領域定義許多Rresurces，以利臨床醫療資料交換及醫資系統整合應用
- 其中 FHIR Observation(客觀觀察或檢查)、Condition(病人問題狀況)、 Questionnaire and QuestionnaireResponse(問卷表單) 用途廣泛，**但在許多健康醫療情境尚未確立其規格及範例，很需要積極去進行**。如附範例連結[ useful clinical FHIR resources](https://hackmd.io/bWEZu4J1STS7yA18H6yvUw?view#Widely-used-clinical-FHIR-resources)
## 編輯 JSON 資料
- JSON 是結構化的文字資料，可用許多文書編輯軟體來編輯，如 VS code
-- [VS code dowoload and install](https://code.visualstudio.com/download)、 VS code 產生及編輯 JSON 資料(加入簡單說明文件)
-- https://code.visualstudio.com/learn/get-started/basics
## 定義 JSON 資訊處理模板的好處
- 利於產生完善易懂的規格文件
-- **JSON 資料規格**搭配系統介面功能、作業流程等說明可產生需求者、開發者、使用者皆易於了解的規格文件
- 利於資料互通及整合應用；可跨系統支援相同的資料規格。
- 利於調整修改。有可能僅需調整 JSON 資料，即可修改或擴充系統，不須改程式。
## JSON VS CSV 檔
- 樹狀的 JSON 結構可用來定義種類的資料(如臨床醫療個領域產生的資料)，並利於程式產生及處理對應的 JSON 資料。
Sign in with Wallet
Connect another wallet