---
# System prepended metadata

title: JS read and set JSON data

---

# JS read and set JSON data
- 請先裝 VS  code 及 live server 套件

## 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 執行範例程式
![](https://i.imgur.com/3WhqzRH.png)
- 執行後，在瀏覽器會看到如下結果:
![](https://i.imgur.com/d6erHir.png)

### Pratice 
- 若要使用 JS 從上述範例取得 "family" 標籤的資料("林")，範例程式第 18 行要如何修改? 
## JS set JSON data
- JS 在 JSON 模板中設定資料範例
- 執行 w_JSON.html 範例程式
![](https://i.imgur.com/xhboZHy.png)
- 瀏覽器會看到的結果如下:
![](https://i.imgur.com/hRzWZuv.png)
### Pratice 
- 若要將"林帶玉"改為"林黛玉"，"帶玉"改為"黛玉"，範例程式要如何修改

### 醫學資訊跨域人才培育大挑戰(論述不夠清楚，再修改)
- 現行醫學及資訊兩領域皆包含浩瀚的知能。每個時間有限，知識無窮。需要進一步分工合作，確立 哪些是必要知能；
- 我們可先建立一安全、穩定、可共通運用之伺服器平台；基於 FHIR 及 DICOMweb，可發展許多網路前端健康醫療應用
- 但網路前端也有許多開發環境及程式，本課程以網頁前端(HTML,JavaScript, CSS) 程式為範例
- 但 HTML, JavaScript, CSS 又各包含許多指令及語法，本課程主要專注在 HTML 輸入及呈現標籤，以及 JS 處理 JSON 物件
- 但 JS 又有許多套件及寫法(瘋狂的世界)，本課程以 JS 基礎語法處理 JSON 資料，如上範例
- 從頭開始撰寫上述範例包含以下步驟 : 0. 產生基礎 HTML 1. 在 HTML 當中加入 JS 程式 2. 設定 JS JSON 物件 3.撰寫取得、設定、及顯示 JSON 資料程式  4. VS code 環境執行 HTML JS 程式。
- 但從無到有撰寫程式過程很容易出錯，而初學者又不知如何偵錯(debug)，因此建議使用複製、貼上、修改
- 後續會提供與臨床作業流程整合應用之範例程式，及修改維護說明，以利修改擴充實際應用；
- 在此發展模式當中，最大的挑戰在於訂立各式 JSON 模板；我們需要許多醫資跨域人才專注在某健康醫療應用領域，以確立模板規格
- 可公告確立的模板，以利跨系統依循，發展可在多地應用之商品。建議與標準推動組織合作(報名參與方式後續提供)，以利確立及公告專業領域所需之標準互通規格 
