之前寫了很久的CSS,很久都沒機會碰js,原本就沒多厲害的js又變得更生疏了...,最近正在學json就來稍微介紹一下吧。
今天就來試試看抓政府的公開資料吧。
找一個公開的json資料
政府現在有許多公開資料,是使用json格式,而最近工作的關係,剛好知道環保署有提供公開資料。
環境資源資料開放平台:http://opendata.epa.gov.tw/
紫外線即時監測資料http://opendata.epa.gov.tw/Data/Contents/UV/
資料非常多,就找一個較短的來做測試,所以就用紫外線資料來做測試吧。
取得資料
我們把jquery官網上所提供的API拿過來改看看,看看能不能得到我們想要的資料。
(function() { var epaAPI = "http://opendata.epa.gov.tw/ws/Data/UV/?$orderby=PublishAgency&$skip=0&$top=1000&format=json"; $.getJSON( epaAPI, function(){ format: "json" }).done(function(data) { console.log(data); }); })();
把上面的code改完以後,看一下console的結果,會發現下面的回應。而主要原因是javascript不能夠跨網域,所以必須做一些調整。
XMLHttpRequest cannot load http://opendata.epa.gov.tw/ws/Data/UV/?$orderby=PublishAgency&$skip=0&$top=1000&format=json. Origin http://127.0.0.1:24681 is not allowed by Access-Control-Allow-Origin.
在網址的後方加上&callback=?,這樣js就可以進行跨網域的請求。
(function() { var epaAPI = "http://opendata.epa.gov.tw/ws/Data/UV/?$orderby=PublishAgency&$skip=0&$top=1000&format=json&callback=?"; //加上&callback=? $.getJSON( epaAPI, function(){ format: "json" }).done(function(data) { console.log(data); }); })();
如果可以傳回像下面這些物件資料,就已經算是取得資料了,而把物件點打開,就可以得到各縣市的空氣品質資料,再配合環保局所提供的API,可以了解個欄位所代表的意義。
[Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object]
County: "嘉義市" PublishAgency: "中央氣象局" PublishTime: "2013-11-04 08:00" SiteName: "嘉義" TWD97Lat: "23,29,52" TWD97Lon: "120,25,28" UVI: "0"