---
# System prepended metadata

title: '[JavaScript] JSON取得公開資料'
tags: [JavaScript]

---

# [JavaScript] JSON取得公開資料
 ###### tags: `JavaScript`



前端工程師在串接資料，常是接後端發出的JSON檔案(API)，再將其內容渲染到網頁。

> JSON，全名JavaScript Object Notation
是受到JavaScript物件實體語法啟發的傳輸格式，比起使用XML傳輸資料，JSON格式在檔案大小上更為輕量，也是現在主流的傳輸格式。


關於物件與JSON字串的轉換，有兩個重要函式：

    JSON.stringify()

將JS物件轉為JSON字串　

    JSON.parse();

將JSON字串轉為JS物件


另外JSON格式再傳輸時(前端到後端、後端到前端)，有時也會以字串的形式處理。
來看看以下程式碼，假設前端從後端接到一個JSON字串
```
'{"name":"Simon","isF2E":"true"}'
```

前端AJAX接到後，現在要取值Simon來用

```
var data = '{"name":"Simon","isF2E":"true"}';
console.log(data.name+'挑戰第14天')
```

因為JSON被引號包著，現在是字串，這時JSON.parse()就派上用場

```
var data = '{"name":"Simon","isF2E":"true"}'
var data2 = JSON.parse(data);
console.log(data2.name+'挑戰第14天')
```

simon的結果就會顯示在頁面上



## 取得公部門JSON公開資料

* 利用網站平台提供的公開資料供大家擷取，例：取得公部門名單
* 可使用json chrome工具顯示可辨讀資訊




![](https://i.imgur.com/tHlAvg4.png)





* 使用chrome json工具可將所有資料轉譯成可辨讀的html資訊，若要運用此名單資料，需將全筆資料(佔整個頁面的資料))放入程式內即可

![](https://i.imgur.com/dchlkov.png)

* 利用迴圈加if判斷撈取相關資料

![](https://i.imgur.com/wmA7YgC.png)

