for - opendata 範例（下）

Posted on In

行政院環境保護署。環境資源資料開放平臺 有很多 open data 可以做練習

  • 以 十分鐘雨量資料 做為範例（可以查詢目前 10 分鐘內的雨量）

  • 進入後，點擊 JSON 檔案

  • 在 chrome 開啟網頁，就可以看到這樣的陣列

現在，我想要知道：十分鐘內，「哪些地區」有下雨（列出它的“County”和“Township”和“Rainfall10min”）

🎃 “有下雨”代表「屬性Rainfall10min(10分鐘累積雨量) > 0」

在 關於資料集 有說明「json 資料中，每個屬性的意義」：

作法如下：

載入 json 資料

「遠端載入 json 資料」的好處：

以「十分鐘雨量資料」為例，這些資料是會一直變動的，如果採用「遠端載入」，就可以即時的更新資料，而不用自己一直手動載入

🎃 用「AJAX」遠端撈取資料，就可以即時的更新資料

  • 「AJAX」的技巧，之後會詳細說明

for迴圈

🎃 先建立一個變數data，來儲存這些 「十分鐘雨量」的 json 資料

🎃 先計算出「陣列中，總共有幾筆資料」： var dataTotal = data.length;

🎃 用if來寫條件： if(data[i].Rainfall10min > '0')

🎃 先用「變數」把「要撈取的值」記錄起來：

🍋 var county = data[i].County;

🍋 var township = data[i].Township;

🍋 var rain = data[i].Rainfall10min;

🎃 原因為：後面需要印出「值」時，直接使用「變數」，程式碼就可以很精簡

🎃 有符合if的條件，就會執行： console.log(county+township+'：'+rain);

🎃 在 Console 就會列出：十分鐘內，「哪些地區」有下雨

JS 程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
// 查詢：十分鐘內，「哪些地區」有下雨

var dataTotal = data.length;

for(var i = 0; i < dataTotal; i++){
    if(data[i].Rainfall10min > '0'){
        var county = data[i].County;
        var township = data[i].Township;
        var rain = data[i].Rainfall10min;
        console.log(county+township+'：'+rain);
    }
}