iT邦幫忙

0

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

承蒙 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>

2 個回答

0
jason311101
iT邦新手 5 級 ‧ 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)下的大括號裡即可
自己再稍微做細部的排版

根據大大的解釋小弟做了測試 把
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>

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

/images/emoticon/emoticon41.gif

0
混水摸魚
iT邦新手 3 級 ‧ 2018-12-14 08:49:12

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

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

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

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

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

淺水員 iT邦新手 4 級 ‧ 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 的參數處理

謝謝大大的指導
/images/emoticon/emoticon41.gif

我要發表回答

立即登入回答