本範例由本年度實習生鄭秉恩設計並編寫，說明如何取得行政院環保署所提供的即時的空氣品質汙染指標資料，格式為 JSON。政府ˋ提供的空氣汙染來源：

http://opendata2.epa.gov.tw/AQI.json

您可使用 http://www.jsoneditoronline.org/ 這樣的網站幫助您更快理解 json 架構, 它會把 raw data 排版完成

一共有 75 個站點可供查詢。您還可以結合 Sharing 元件，將空氣品質的狀況寄發 email 或是發佈到 Facebook 喔。或者用藍牙傳給 Arduino 或樂高機器人也是有趣的專題呢！

操作方式如下

1. 點選 [取得縣市清單]按鈕，會呼叫Web元件去爬一次上述網址取得最新資料。程式初始畫面如下

2.  點選 [選取縣市] 清單選取器，會開啟縣市清單讓您點選想要檢視的觀測站。請注意這是原始資料中的   而不是 County。

3. 點選您想要的縣市就會顯示當地的空氣品質

Designer 頁面配置

相當簡單，記得 Web 元件是用來抓取網頁與進行 Json decode

程式碼

1.宣告的變數

把所需用到的東西宣告為0或者為一個空的清單

2.按鈕更新最新的空氣品質資料

當觸碰到按鈕時 確認再 all_city清單是否為空的，如果清單為空，就要求 web 元件去抓，否則就先清空 all_city 清單之後再抓資料以免重複抓取。

3.更新清單內容

當碰到”清單選擇器1”時將elements裡的東西設為all_city裡面的資料(講白了就是把web裡的資料料抓到表單裡)，並在執行之後把select(選取項) & city_num(選取向索引)在抓取web資料

4.解析網頁資料，並根據所點選的觀測站來顯示該站的縣市的空氣品質

1.從web裡抓到資料丟到all_city之後建立一個清單

2.抓取web 中的json 並把json轉換成jsontext(如下圖)

3. 確定清單長度並開始抓取資料

註1. 這裡的2 2的意思是第2個第2列(如下圖)

4.抓取PM10的資料 它在上上圖中的第9個並丟入 city_num的表單。

5.抓取PM2.5的資料 它在上上圖中的第10個並丟入 city_num的表單。

6.抓取CO的資料 它在上上圖中的第1個並丟入 city_num的表單。

7.抓取NO的資料 它在上上圖中的第5個並丟入 city_num的表單。

8.抓取NO2的資料 它在上上圖中的第6個並丟入 city_num的表單。

9.抓取O3的資料 它在上上圖中的第8個並丟入 city_num的表單。

10. 主要是把label裡的文字替換成我們所要出現的數值

      City(縣市)>>select(我們選擇的城市)

      PM10    >> 數值(PM10裡的資料)

      PM2.5   >> 數值(PM2.5裡的資料)

      CO   >> 數值(CO裡的資料)

      NO   >> 數值(NO裡的資料)

      NO2     >> 數值(NO2裡的資料)

      O3   >> 數值(O3裡的資料)