第 363 篇 · 第 14 卷 前端,沒有極限 2026 年 7 月 16 日 · 台北
ls -lt ./posts --since=2013 REC · node 363 · uplink

jquery

利用json取得公開資料(2)

2013 年 11 月 05 日 · 2 分鐘閱讀 · By Wang Casper

在上回已經取得資料,這次就來把取回來的資料放入到表格內。

$.each

取回的資料是很多個物件,物件內還有著陣列,陣列內都包含著一個名稱及一個值(如下圖),物件內包含著"SiteName"的名稱及"嘉義"等地名的值,首先要把每一個物件拆開,就需要用到$.each。

(function() {
  var epaAPI = "http://opendata.epa.gov.tw/ws/Data/UV/?$orderby=PublishAgency&$skip=0&$top=1000&format=json&callback=?";
  $.getJSON( epaAPI, function(){
    format: "json"
  }).done(function(data) {
      $.each( data, function( i, item ) {
      	//把每一個物件拆開來執行一次function
      	console.log(item);
      });
    });
})();

接下來的console(item)就會看到上面那張圖的內容。

取出個別的資料

這份資料相當的多,所以要先做個過濾,從上面得知的結果,他有一個county的名稱,裡面有不同的縣市名稱,試試看取出高雄市的資料就好。先定義一個變數"_DefaultContry"其值為高雄市。

另外在資料可以用item.SiteName的方式取出,等等就一次做完吧~。

(function() {
  var epaAPI = "http://opendata.epa.gov.tw/ws/Data/UV/?$orderby=PublishAgency&$skip=0&$top=1000&format=json&callback=?";
  var list = ''
  _DefaultContry = '高雄市'
  //定義高雄市的變數

  $.getJSON( epaAPI, function(){
    format: "json"
  }).done(function(data) {
      $.each( data, function( i, item ) {
      	console.log(item);
      	if(item.County == _DefaultContry){ //假設是高雄市才執行
       		list = ''+ item.SiteName+''+ item.PublishTime+''+ item.TWD97Lon+''+ item.UVI+'';
			//利用item.值,把每一個值取出,並寫成一個html存在list的變數內

			$('.itemlist').append(list);
			//最後把剛剛的html放到表格內
		};	
      });
    });
})();

最後就會產生如下的結果(如果沒有失聯的話,下面是有內容的...)。

測站名稱 發布時間 經度(TWD97) 紫外線指數