利用 jQuery.ajax( url [, settings ] ) 去取得環保署的 open data ,卻不會讀取!!!

open data ajax() jsonp

gmsopendata 2018-12-14 01:20:36 ‧ 2166 瀏覽

分享至

承蒙 marlin12 前輩的解析可以抓到 open data,並用 JSONView 顯示,小弟進一步想要讀取資料時還是卡了很久,例如應該如何取得 data 內的內容
{ Site:"富貴角",county:"新北市",…} 還望各位先賢指點.

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.css" />
</head>

<body>
    <div id="json"></div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.js"></script>

    <script>
        $.ajax({
            url: "https://opendata.epa.gov.tw/webapi/api/rest/datastore/355000000I-000207/?format=jsonp&token=SRfmMRV2QkWOVtI/YqvnrQ",
            type: "GET",
            dataType: "jsonp",
            success: function (data) {
                $("#json").JSONView(data);
            }
        });
    </script>
</body>

</html>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

jason311101

iT邦新手 4 級 ‧ 2018-12-14 08:16:36

最佳解答

用parameter先找到array配object名稱取值
看他原本用的object name是啥

以你的例子大概是長這樣

//取得資料所在的array(records)
var data_json=data.records;
var data_length=data_json.length;
//取鄉鎮:
var site=data_json.site;
//取城市
var county=data_json.county;

接著就看你要怎運用這些值了看是要用迴圈列出還是
看你的程式應該是想把這些資料呈現在id名為json的div裡吧那就用迴圈
加了個簡單的表格

//取得資料所在的array(result裡的records)
var data_json=data.result;
var data_result=data_json.records;
var data_length=data_result.length;
var result="<table style=text-align:center;><tr><th>鄉鎮</th><th>城市</th><th>PM25</th><th>資料製作日期</th><th>項目單位</th></tr>";

for(q=0;q<data_length;q++)
{
	result+="<tr><td>"+data_result[q].Site+"</td>";
    result+="<td>"+data_result[q].county+"</td>";
	result+="<td>"+data_result[q].PM25+"</td>";
	result+="<td>"+data_result[q].DataCreationDate+"</td>";
	result+="<td>"+data_result[q].ItemUnit+"</td></tr>";

    $("#json").html(result);
}
result="</table>";

把這整串放到success: function (data)下的大括號裡即可
自己再稍微做細部的排版

回應 3
分享
檢舉

gmsopendata iT邦新手 5 級 ‧ 2018-12-14 11:33:48 檢舉

根據大大的解釋小弟做了測試把
1.var data_json=data.records;
2.var data_length=data_json.length;
2個變數加入 success: function (data) 程式片段之中
執行結果是一片空白,如果只加入第一個變數程式則可以繼續執行
$("#json").JSONView(data); 顯示data的內容
??? 請問 data.records 的架構還是 data.records.length 有問題 ????

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.css" />
</head>

<body>
    <div id="json"></div>

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.js"></script>

    <script>
        $.ajax({
            url: "https://opendata.epa.gov.tw/webapi/api/rest/datastore/355000000I-000207/?format=jsonp&token=SRfmMRV2QkWOVtI/YqvnrQ",
            type: "GET",
            dataType: "jsonp",
            success: function (data) {
				//取得資料所在的array(records)
                 var data_json=data.records;
                 var data_length=data_json.length;

                 
				
                $("#json").JSONView(data);
            }
        });
    </script>
</body>

</html>

jason311101 iT邦新手 4 級 ‧ 2018-12-14 11:56:48 檢舉

因為records是在result裡所以找不到才會空白
請使用下方的程式上方的只是範例

gmsopendata iT邦新手 5 級 ‧ 2018-12-14 13:05:29 檢舉

登入發表回應

混水摸魚

iT邦研究生 2 級 ‧ 2018-12-14 08:49:12

ajax 不允許跨網域存取，要的話要在資料來源端也加入一些參數才可以哦！

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

gmsopendata iT邦新手 5 級 ‧ 2018-12-14 10:50:32 檢舉

根據 marlin12 前輩所給的程式已解決這個問題 ,謝謝指教.

jason311101 iT邦新手 4 級 ‧ 2018-12-14 11:26:06 檢舉

有用過我提供的程式嗎應該是有功能的吧?

gmsopendata iT邦新手 5 級 ‧ 2018-12-14 11:41:11 檢舉

剛才又是了一次加了 result 之後就成功了
//取得資料所在的array(result裡的records)
var data_json=data.result;
var data_result=data_json.records;
var data_length=data_result.length;

謝謝解答

淺水員 iT邦大師 6 級 ‧ 2018-12-14 12:34:05 檢舉

opendata網站的確不允許跨域存取
不過這邊用的api有提供jsonp介面
例如這樣可以取得資料：

function jsonp_cbk(data)
{
	console.log(data);
}

var jsonpScript=document.createElement("script");
document.body.appendChild(jsonpScript);
jsonpScript.src="https://opendata.epa.gov.tw/webapi/api/rest/datastore/355000000I-000207/?format=jsonp&token=SRfmMRV2QkWOVtI/YqvnrQ&callback=jsonp_cbk";

主要的原理是 js 不受跨域限制，把資料當作 callback 的參數處理