# 【Day21】JSON格式中的陣列與物件
###### tags: `JavaScript` `14th鐵人賽`
從物件及陣列中有提到一些混用的寫法，現實中這種狀況可能會出現在JSON的檔案中，而他們三個又是什麼三角關係呢?

本篇會介紹：

- 什麼是 JSON
- JSON 應用在哪？
- JSON vs XML
- 透過JSON VIEW來看JSON格式
- JavaScript 處理 JSON 資料

---

## 什麼是 JSON

MDN 介紹如下：JavaScript Object Notation (JSON) 為將結構化資料 (structured data) 呈現為 JavaScript 物件的標準格式，常用於網站上的資料呈現、傳輸 (例如將資料從伺服器送至用戶端，以利顯示網頁)。

簡單來說JSON是一種純文字的資料傳遞格式，在不同結構的資料庫互相傳遞使用，JSON也讓溝通及交換資料的方式更加簡單。

- 支援JS的基本型別和物件型別(字串、數字、布林、陣列、物件、Null)
- JSON相較於XML簡潔易懂
- 許多程式都支援函式庫讀取
- 多使用在JavaScript、JAVA、Node.js

## JSON應用在哪？

許多格式都可以使用JSON格式作為資料交換，API的讀寫為例：讀取社交媒體個人公開資料、Youtube上的影片資料、取得即時天器資訊……等，都會用到JSON作為資料格式規格。

上圖就是透過政府公開資料庫可預覽的的JSON資料

這邊在複習一次前面幾篇文章的陣列物件!

物件(object)用大括號 `{ }`

陣列(array)用中括號 `[ ]`

## 透過Chrome擴充功能JSON Vue

若想要實際看到JSON格式可以到公開資料庫了解實際案例，但下載後可能會讓你看的眼花撩亂，這時可以先載JSON Vue，相較於剛才的內容就簡潔易懂許多!

以南投縣公共圖書館地址、電話表為例

使用JSON Vue


JSON格式，可右鍵「檢視網站原始碼」即可看到內容


[開放數據](https://www.datastation.org.tw/opendata)

- 相較於物件不同的是JSON檔使用" "將屬性包起來
- JSON 可作為物件；當要跨網路傳送 JSON 時，就會是字串。

當然你也可以自己建立一個JSON檔輸入陣列貨物建，最後另存時用副檔名.json儲存。

## JavaScript 處理 JSON 資料

檢視網頁原始碼→全選複製→於VS Code中宣告一個變數命名為data並將JSON格式的資料貼上

### 讀取方式

以南投縣公共圖書館地址、電話表為例

輸入`console.log(data.length)`

可以得知總共16筆資料


同陣列、物件的呼叫方式

輸入`console.log(data.[0])`、`console.log(data[0].開館時間)`


### 篩選出需要的資料並賦予變數

當資料中可能只需要部分內容，可以先抓出全部資料在透過變數去做整合

`let arr = data.陣列or物件名稱`

以上為本次JSON的部分，有興趣的人也可以到公開數據處看看資料的型態做個簡單的練習~

參考資料
[MDN](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Objects/JSON)
[JSON與XML整理的很棒的文件](https://hackmd.io/@keep/json-array-object)