# JSON資料處理
## 什麼是JSON？
首先，我們不妨來簡單的了解一下什麼是JSON。
- 教材鏈結： [JSON 資料概述](https://hackmd.io/D2mj64z6SBSN7LikIzoscA)
看完上述教材後，相信大家已經對JSON有了初步的了解，現在就讓我們一起看看如何用程式對JSON資料進行解析吧！
* 範例程式碼下載地址：https://github.com/UnicornYumi/AnalysisJSON
## `<script>`標籤介紹
* HTML `<script>` 標籤 (tag)：執行 JavaScript 程式碼
* `<script>` tag 是用來寫 JavaScript 的，你可以直接 (inline) 寫 JavaScript code 在 `<sciprt>` 裡面，或是用 `<script>` 來載入外部 JavaScript 程式檔案。
## 解析JSON資料
1. 定義一個物件
* 在網頁資料處理的過程中，我們常常將資料從一端傳到另一端（例如，從伺服器端傳到客戶端），這時候我們就需要一些共通的格式來方便包裝資料和解讀資料。
* 現在我們就在程式中建立一個JSON格式的物件，如下範例所示：
```json=
var Jas = {
"resourceType": "Patient",
"name": [{
"use": "official",
"text": "林帶玉",
"family": "林",
"given": ["帶玉"]
}],
"gender": "female",
"birthDate": "1773-01-21",
};
```
2. 物件轉字串
JSON.stringify() ：物件變JSON字串
- JSON 會儲存純文字，不算是一種 Javascript，但是 Javascipt 有內建的方法可以解析它；JSON.stringify()的方法就是可以**將任何物件轉變為 JSON 字串**。string 是字串的意思，stringify 則視為動詞字串化，將 Javascript 物件轉為 JSON 字串。
```json=
var ret = JSON.stringify(Jas);
```
3. 顯示字串內容
* 在上一步中，我們已經將物件轉換成了字串。於是我們就可以將JSON字串的內容全部讀出來。
* 下面介紹兩種顯示的方法，大家可以根據需求或喜好選擇自己喜歡的方式：
--- 網頁彈出結果 ---
```json=
alert(ret);
```
如下圖，網頁上就會跳出該彈窗，將我們上面所定義的JSON物件通過字串的方式呈現於彈窗中：
-- 網頁頁面呈現 --
其中，document.write()是JavaScript將文字呈現於網頁上的方法。`<br>`則是換行的意思。
```json=
document.write("JSON物件內容：<br><br>")
document.write(ret)
```
如下圖，網頁上就會呈現出我們想顯示的文字以及JSON字串的內容：
4. 解析物件
* 現在，我們已經能讀到JSON物件中的全部內容了。在日常使用中，我們要的往往不是這樣一串複雜的文本，而是需要其中的資訊。
* 接下來，我們就可以將其中的資訊解析出來，讓我們在網頁上閱讀更加一目了然。
以提取姓名為範例，從字串內容中可以發現，姓名的信息在name中的text屬性裡面。範例程式碼如下：
```json=
var name = Jas.name[0].text;
document.write("<br>Name: ", name)
```
執行程式碼後，在網頁上就可以很清楚的看到姓名被我們提取出來了。
同理，模仿上述範例，大家可以試看看把物件中所有的資訊一一解析出來，在網頁中顯示如下結果：
5. 修改物件資訊
若我們想要修改物件中的某個值，可以使用以下方法：
```json=
document.write("<br><br><br>--修改物件值--<br>")
Jas.birthDate = "2000-01-01";
var ret2 = JSON.stringify(Jas)
document.write("修改後JSON物件內容：<br>")
document.write(ret2)
```
將BirthDate改為2000-01-01，此時，將更改後的JSON物件重新定義並轉換字串。當我們再次將物件內容呈現出來時，就可以看到資料已經進行更改了。
## 延伸：字串轉JSON物件
JSON.parse() ：JSON字串變物件
* 我們在前面有物件變JSON字串的方法，這裡延伸介紹JSON.parse()這個函式，它可以幫助我們將字串轉成物件。
* 我們使用上述程式中傳出來的字串文本做一個宣告，將字串轉換成物件後，可以提取出字串中的firstName和lastName組合出一個完整的名字。
```json=
<html>
<head></head>
<body>
<h3>I want to get your Name:</h3>
<h3 id="demo"></h3>
<script>
// 定義一個 JSON 物件
let text = '{"resourceType":"Patient","name":[{"use":"official","text":"林帶玉","family":"林","given":["帶玉"]}],"gender":"female","birthDate":"1773-01-21"}';
const obj = JSON.parse(text);// 字串轉物件
document.getElementById("demo").innerHTML = obj.name[0].family + " " + obj.name[0].given[0]; // 顯示於網頁中
</script>
</body>
</html>
```
Sign in with Wallet
Connect another wallet