前言

談一下 JSON ，算是複習一下物件和迴圈吧

JSON

• JSON （JavaScript Object Notation，JavaScript 物件表示法)
• WIKI：以易於讓人閱讀的文字為基礎，用來傳輸由屬性值或者序列性的值組成的資料物件
• 對於資料交換，如：開放資料( opendata )是一個很常見的格式，之前在Day14 - 迴圈(02) - 綜合練習有稍微提過

問題

• 顯示亂碼？
  • JSON 的標準編碼格式為 UTF-8，與 Big-5 編碼方式有所不同，可以檢查是否設定不同，參考
• opendata？
  • 開放資料，指的是一種經過挑選與許可的資料。這種資料不受著作權、專利權，以及其他管理機制所限制，可以開放給社會公眾，任何人都可以自由出版使用，不論是要拿來出版或是做其他的運用都不加以限制。(from WIKI)
  • 政府資料開放平台：https://data.gov.tw/

練習

• 預計使用 PM 2.5 的資料：https://data.gov.tw/dataset/34827

• 資料格式如下

  • Site(測站名稱)
  • county(縣市名稱)
  • PM25(細懸浮微粒濃度)
  • DataCreationDate(資料建置日期)
  • ItemUnit(測項單位)

• 使用 Chrome 插件 JSONView 來觀看 JSON 格式的檔案，可以讓檔案比較具有可讀性

  • 未使用 JSONView
    
  • 使用 JSONView
    

• 將 data 資料先全選複製內容到 JS 檔案內

  • 想要連線可以即時更新的？預計未來學習到 AJAX 時再來更新

var data = [
    {
    Site: "崙背",
    county: "雲林縣",
    PM25: "51",
    DataCreationDate: "2019-10-04 11:00",
    ItemUnit: "μg/m3"
    },
    // 中間略過
    {
    Site: "基隆",
    county: "基隆市",
    PM25: "9",
    DataCreationDate: "2019-10-04 21:00",
    ItemUnit: "μg/m3"
    }
    ]

• 先確認一下筆數，之後隨便挑一個驗證看看，如果不一樣或是沒挑出來就有問題

console.log("筆數：" + data.length);
// 筆數：78

console.log(data[10]);

// DataCreationDate: "2019-10-04 21:00"
// ItemUnit: "μg/m3"
// PM25: "38"
// Site: "竹山"
// county: "南投縣"

• 挑出在"臺中市"的站點名稱
  • 可以挑出 5 個測站

var total = data.length;

for (var i = 0 ; i < total ; i++){
    if (data[i].county === "臺中市"){
        console.log(data[i].Site);
    }
}

// 西屯
// 忠明
// 大里
// 沙鹿
// 豐原

• 加點變化，增加一個變數，讓挑出來的站點加入序號
  • 挑出來滿足 if 條件的才會進入執行，才將序號 a +1
  • var a 放在外面是因為如果放迴圈裡面，a 每次進入迴圈就被重設為 0

var total = data.length;
var a = 0;

for (var i = 0 ; i < total ; i++){
    if (data[i].county === "臺中市"){
        console.log("站點 " + (a+1) + "：" + data[i].Site);
        a ++;
    }
}

// 站點 1：西屯
// 站點 2：忠明
// 站點 3：大里
// 站點 4：沙鹿
// 站點 5：豐原

• 挑出 PM2.5 超過 35.4 的須注意
  • 參考空氣品質指標
  • 利用 if 挑出PM 2.5 > 35.4 的站點並列出
  • 並且將超標的站點數量 b + 1
  • 在跑完迴圈後，將統計的值 b 列出

var total = data.length;
var b = 0;

for (var i = 0 ; i < total ; i++){
    if (data[i].PM25 > 35.4){
    console.log("需注意！" + data[i].county + "的" + data[i].Site + "超標！");
    b ++; // 有第1站 b=0+1=1
    }
}

console.log("總共有" + b + "站超標！");

// 需注意！雲林縣的崙背超標！
// 需注意！南投縣的埔里超標！
// 需注意！南投縣的竹山超標！
// 需注意！臺南市的新營超標！
// 需注意！雲林縣的臺西超標！
// (下略)
// 總共有22站超標！

• 一開始是在 if 判斷前面又多一個外層的 if ，然後在最後一次進入 else 將總共超標的數量列出，感覺奇怪因此修正如上

次回

進入事件篇了！