6.開放資料

開放資料：許多政府網站，都有提供不少 Opendata 的資訊讓開發者使用，例如：政府資料開放平台、行政院環境保護署環境資源資料開放平臺
在「網頁前端」使用 Opendata，連結JSON網址，讓JSON 資料就能進到網頁裡。( 使用 output 顯示 )
- 例如：以行政院環保署空氣品質指標(AQI)開放資料為例(JSON連結)

var dataUrl= "https://data.epa.gov.tw/api/v1/aqx_p_432?limit=1000&api_key=9be7b239-557b-4c10-9775-78cadfc555e9&format=json";

var xhr = new XMLHttpRequest();

xhr.open('GET',dataUrl, true);

xhr.send();

var AQI;

var site;

xhr.onload = function(){

var data = JSON.parse(this.responseText);

var data2=data.records; //各縣市資料在records物件內

for ( var i=0; i<data2.length; i++) {

if(data2[i].County=="金門縣"){

site=data2[i].SiteName;

AQI=data2[i].AQI;

}

//demo-area-01-show是從HTML中設定的id

/*

<body>

</body>

*/

document.getElementById('demo-area-01-show').innerHTML = (site+":"+AQI);

};

- 檔案連結

使用開放資料查詢空氣品質，依據PM2.5的數值在LED點矩陣上顯示VERY HIGH,HIGH,NORMAL,LOW，並在網頁上顯示中文，且三色LED以不同顏色發亮。

一、先將程式方塊完成，再切換到程式編輯

二、在html區塊加上content，以便顯示文字

<body>

</body>

三、在javascript貼上以下程式碼

var matrix;

var PM25;

var $content = $('#content');

var rgbled;

boardReady({board: 'Smart', device: 'neERJ', transport: 'mqtt'}, function (board) {

board.samplingInterval = 50;

matrix = getMax7219(board, 14, 16, 0);

rgbled = getRGBLedCathode(board, 15, 12, 13);

$.get('http://opendata2.epa.gov.tw/AQX.json',function(e){

e.forEach(function(o){

if(o.SiteName=='金門'){

$content.append('< '+o.SiteName+' > PM2.5:'+o['PM2.5']+', PM10:'+o.PM10+'<br/>');

PM25=o['PM2.5'];

if (PM25 > 70) {

matrix.animateStop();

matrix.animate(max7219_horse("left",(max7219_alphabet('VERY HIGH'))), 300);

rgbled.setColor('#cc33cc');

} else if (PM25 > 53) {

matrix.animateStop();

matrix.animate(max7219_horse("left",(max7219_alphabet('HIGH'))), 300);

rgbled.setColor('#ff0000');

} else if (PM25 > 35) {

matrix.animateStop();

matrix.animate(max7219_horse("left",(max7219_alphabet('NORMAL'))), 300);

rgbled.setColor('#ffcc00');

} else {

matrix.animateStop();

matrix.animate(max7219_horse("left",(max7219_alphabet('LOW'))), 300);

rgbled.setColor('#009900');

} //else

}//if金門

}); //e.forEach

}); //$get

}); //boardReady