【JavaScript】使用XMLHttpRequest類別抓取政府公開資料並轉成JSON格式進行資料的操作
中華民國政府近年來的開放資料平台提供了不少我們可以用來操作的“大數據“，這篇文章我們使用JavaScript前端方式來抓取並操作政府開放資料平台所提供的資料。
政府資料開放平台網址：https://data.gov.tw/
我在台中市找了賞花的地點：
資料的格式選擇JSON方便處理。
複製資料下載網址：https://datacenter.taichung.gov.tw/swagger/OpenData/f116d1db-56f7-4984-bad8-c82e383765c0
程式範例：
上面表格格式的css資料取自：https://codepen.io/florantara/pen/dROvdb (網路上可搜尋 "css table template"，找單純CSS的，不要有SCSS或JS部份的，否則套用上會比較複雜。)
註：賞花景點原始資料
我在台中市找了賞花的地點：
資料的格式選擇JSON方便處理。
複製資料下載網址：https://datacenter.taichung.gov.tw/swagger/OpenData/f116d1db-56f7-4984-bad8-c82e383765c0
程式範例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function httpGet(theUrl){
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
xmlHttp.send( null );
return xmlHttp.responseText;
}
//取得台中市賞花景點資料
let data = httpGet("https://datacenter.taichung.gov.tw/swagger/OpenData/f116d1db-56f7-4984-bad8-c82e383765c0");
//將字串形式的資料轉成JSON(陣列)
let dataJSON = JSON.parse(data);
//走訪每個景點物件，如果行政區是后里區的話
dataJSON.forEach(function (place) {
if( place['行政區'] === '后里區')
document.writeln('地點：' + place['地點'] + ' 花種：' + place['花種'] + '<BR>');
//console.log('地點：' + place['地點'] + ' 花種：' + place['花種']);
});
</script>
</body>
</html>
輸出：
地點: 泰安派出所 花種: 櫻花 地點: 中社花市 花種: 鬱金香 地點: 中社花市 花種: 荷花 地點: 中社花市 花種: 百合花 地點: 泰安國小 花種: 落羽松 地點: 麗寶樂園 花種: 落羽松
接著我們介紹如何將挖出來的資料以表格的方式並具有格式的顯示在網頁上：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
<style>
body{
font-family: Helvetica;
-webkit-font-smoothing: antialiased;
background: rgba( 71, 147, 227, 1);
}
h2{
text-align: center;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
color: white;
padding: 30px 0;
}
/* Table Styles */
.table-wrapper{
margin: 10px 70px 70px;
box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.2 );
}
.fl-table {
border-radius: 5px;
font-size: 14px;
font-weight: normal;
border: none;
border-collapse: collapse;
width: 100%;
max-width: 100%;
white-space: nowrap;
background-color: white;
}
.fl-table td, .fl-table th {
text-align: center;
padding: 8px;
}
.fl-table td {
border-right: 1px solid #f8f8f8;
font-size: 14px;
}
.fl-table thead th {
color: #ffffff;
background: #4FC3A1;
font-size: 16px;
}
.fl-table thead th:nth-child(odd) {
color: #ffffff;
background: #324960;
}
.fl-table thead tr:first-child th{
background: #F8F8F8;
color: #324960;
font-size: 18px;
}
.fl-table tr:nth-child(even) {
background: #F8F8F8;
}
</style>
</head>
<body>
<div class="table-wrapper">
<table class="fl-table">
<thead class="">
<tr>
<th colspan="5"><h1 class="title">台中市賞花景點</h1></th>
</tr>
<tr>
<th>行政區域</th>
<th>地點</th>
<th>花種</th>
<th>觀賞期</th>
<th>地址</th>
</tr>
</thead>
<tbody id= "result"></tbody>
</table>
</div>
</body>
<script>
function httpGet(theUrl){
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
xmlHttp.send( null );
return xmlHttp.responseText;
}
//取得台中市賞花景點資料
let dataString = httpGet("https://datacenter.taichung.gov.tw/swagger/OpenData/f116d1db-56f7-4984-bad8-c82e383765c0");
//將字串形式的資料轉成JSON(陣列)
let dataJSON = JSON.parse(dataString);
var table = "" ;
for(var i in dataJSON){
table += "<tr>";
table += "<td>"
+ dataJSON[i].行政區 +"</td>"
+ "<td>" + dataJSON[i].地點 +"</td>"
+ "<td>" + dataJSON[i].花種 +"</td>"
+ "<td>" + dataJSON[i].觀賞時期 +"</td>"
+ "<td>" + dataJSON[i].地址 +"</td>" ;
table += "</tr>";
}
document.getElementById("result").innerHTML = table;
</script>
</html>
結果畫面：
上面表格格式的css資料取自：https://codepen.io/florantara/pen/dROvdb (網路上可搜尋 "css table template"，找單純CSS的，不要有SCSS或JS部份的，否則套用上會比較複雜。)
註：賞花景點原始資料
[{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"后里區" , "行政區代碼":"66000150" , "地點":"泰安派出所" , "地址":"臺中市后里區安眉路27號" , "花種":"櫻花" , "觀賞時期":"2月-3月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"后里區" , "行政區代碼":"66000150" , "地點":"中社花市" , "地址":"臺中市后里區三豐路五段333號" , "花種":"鬱金香" , "觀賞時期":"1月-3月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"后里區" , "行政區代碼":"66000150" , "地點":"中社花市" , "地址":"臺中市后里區三豐路五段333號" , "花種":"荷花" , "觀賞時期":"6月-8月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"后里區" , "行政區代碼":"66000150" , "地點":"中社花市" , "地址":"臺中市后里區三豐路五段333號" , "花種":"百合花" , "觀賞時期":"11月-4月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"后里區" , "行政區代碼":"66000150" , "地點":"泰安國小" , "地址":"臺中市后里區安眉路26-9號" , "花種":"落羽松" , "觀賞時期":"12月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"后里區" , "行政區代碼":"66000150" , "地點":"麗寶樂園" , "地址":"臺中市后里區福容路8號" , "花種":"落羽松" , "觀賞時期":"12月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"東勢區" , "行政區代碼":"66000100" , "地點":"東勢林場" , "地址":"臺中市東勢區勢林街6-1號" , "花種":"梅花" , "觀賞時期":"1月-2月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"東勢區" , "行政區代碼":"66000100" , "地點":"東勢林場" , "地址":"臺中市東勢區勢林街6-1號" , "花種":"櫻花" , "觀賞時期":"2月-3月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"東勢區" , "行政區代碼":"66000100" , "地點":"東勢林場" , "地址":"臺中市東勢區勢林街6-1號" , "花種":"桐花" , "觀賞時期":"4-5月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"東勢區" , "行政區代碼":"66000100" , "地點":"東勢林場" , "地址":"臺中市東勢區勢林街6-1號" , "花種":"楓葉" , "觀賞時期":"11-12月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"東勢區" , "行政區代碼":"66000100" , "地點":"東勢河濱公園" , "地址":"臺中市東勢區東關路七段" , "花種":"木棉花" , "觀賞時期":"4月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"東勢區" , "行政區代碼":"66000100" , "地點":"東勢河濱公園" , "地址":"臺中市東勢區東關路七段" , "花種":"阿勃勒" , "觀賞時期":"5月-6月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"東勢區" , "行政區代碼":"66000100" , "地點":"東勢林業文化園區" , "地址":"臺中市東勢區東關路647號" , "花種":"鳳凰花" , "觀賞時期":"5月-6月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"東勢區" , "行政區代碼":"66000100" , "地點":"東勢林業文化園區" , "地址":"臺中市東勢區東關路647號" , "花種":"荷花" , "觀賞時期":"6月-8月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"和平區" , "行政區代碼":"66000290" , "地點":"大雪山國家森林遊樂園區" , "地址":"臺中市和平區雪山路18號" , "花種":"櫻花" , "觀賞時期":"2月-3月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"和平區" , "行政區代碼":"66000290" , "地點":"大雪山國家森林遊樂園區" , "地址":"臺中市和平區雪山路18號" , "花種":"楓葉" , "觀賞時期":"11月-12月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"和平區" , "行政區代碼":"66000290" , "地點":"八仙山國家森林遊樂園區" , "地址":"臺中市和平區東關路一段200之8號" , "花種":"楓葉" , "觀賞時期":"11月-12月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"和平區" , "行政區代碼":"66000290" , "地點":"武陵農場" , "地址":"臺中市和平區平等里武陵路3-1號" , "花種":"櫻花" , "觀賞時期":"2月-3月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"和平區" , "行政區代碼":"66000290" , "地點":"武陵農場" , "地址":"臺中市和平區平等里武陵路3-1號" , "花種":"紫藤花" , "觀賞時期":"3月-4月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"和平區" , "行政區代碼":"66000290" , "地點":"武陵農場" , "地址":"臺中市和平區平等里武陵路3-1號" , "花種":"楓葉" , "觀賞時期":"11月-12月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"和平區" , "行政區代碼":"66000290" , "地點":"福壽山農場" , "地址":"臺中市和平區梨山村福壽路29號" , "花種":"魯冰花" , "觀賞時期":"5月-6月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"和平區" , "行政區代碼":"66000290" , "地點":"福壽山農場" , "地址":"臺中市和平區梨山村福壽路29號" , "花種":"玻斯菊" , "觀賞時期":"9月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"和平區" , "行政區代碼":"66000290" , "地點":"福壽山農場" , "地址":"臺中市和平區梨山村福壽路29號" , "花種":"楓葉" , "觀賞時期":"11月-12月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"新社區" , "行政區代碼":"66000190" , "地點":"櫻木花道" , "地址":"臺中市新社區中和街三段56巷16號" , "花種":"櫻花" , "觀賞時期":"2月-3月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"新社區" , "行政區代碼":"66000190" , "地點":"薰衣草森林" , "地址":"臺中市新社區中興街20號" , "花種":"薰衣草" , "觀賞時期":"1月-5月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"新社區" , "行政區代碼":"66000190" , "地點":"薰衣草森林" , "地址":"臺中市新社區中興街20號" , "花種":"繡球花" , "觀賞時期":"5月-6月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"新社區" , "行政區代碼":"66000190" , "地點":"抽藤坑休閒農業園區" , "地址":"臺中市新社區中和里社區" , "花種":"梅花" , "觀賞時期":"1月-2月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"新社區" , "行政區代碼":"66000190" , "地點":"抽藤坑休閒農業園區" , "地址":"臺中市新社區中和里社區" , "花種":"櫻花" , "觀賞時期":"2月-3月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"新社區" , "行政區代碼":"66000190" , "地點":"抽藤坑休閒農業園區" , "地址":"臺中市新社區中和里社區" , "花種":"桐花" , "觀賞時期":"4月-5月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"新社區" , "行政區代碼":"66000190" , "地點":"抽藤坑休閒農業園區" , "地址":"臺中市新社區中和里社區" , "花種":"金針花" , "觀賞時期":"6月-8月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"新社區" , "行政區代碼":"66000190" , "地點":"詠惠生技有限公司" , "地址":"臺中市新社區興中街42-1號" , "花種":"紫藤花" , "觀賞時期":"3月-4月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"新社區" , "行政區代碼":"66000190" , "地點":"沐心泉休閒農場" , "地址":"臺中市新社區中和村中興街60號" , "花種":"黃金風鈴木" , "觀賞時期":"3月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"新社區" , "行政區代碼":"66000190" , "地點":"沐心泉休閒農場" , "地址":"臺中市新社區中和村中興街60號" , "花種":"桐花" , "觀賞時期":"4月-5月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"新社區" , "行政區代碼":"66000190" , "地點":"沐心泉休閒農場" , "地址":"臺中市新社區中和村中興街60號" , "花種":"金針花" , "觀賞時期":"6月-8月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"潭子區" , "行政區代碼":"66000170" , "地點":"新田登山步道" , "地址":"臺中市潭子區龍興巷" , "花種":"落羽松" , "觀賞時期":"12月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"北屯區" , "行政區代碼":"66000080" , "地點":"文昌國小旁" , "地址":"臺中市北屯區昌平路一段91號" , "花種":"櫻花" , "觀賞時期":"2月-3月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"北屯區" , "行政區代碼":"66000080" , "地點":"?子公園" , "地址":"臺中市北屯區?子路418號" , "花種":"黃金風鈴木" , "觀賞時期":"2月-3月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"太平區" , "行政區代碼":"66000270" , "地點":"新福公園" , "地址":"臺中市太平區旱溪東路二段" , "花種":"阿勃勒" , "觀賞時期":"5月-6月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"霧峰區" , "行政區代碼":"66000260" , "地點":"亞洲大學" , "地址":"臺中市霧峰區柳豐路500號" , "花種":"阿勃勒" , "觀賞時期":"5月-6月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"霧峰區" , "行政區代碼":"66000260" , "地點":"亞洲大學" , "地址":"臺中市霧峰區柳豐路500號" , "花種":"鳳凰花" , "觀賞時期":"5月-6月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"霧峰區" , "行政區代碼":"66000260" , "地點":"亞洲大學" , "地址":"臺中市霧峰區柳豐路500號" , "花種":"荷花" , "觀賞時期":"6月-8月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"大里區" , "行政區代碼":"66000280" , "地點":"國光公園" , "地址":"臺中市大里區興大南街43號" , "花種":"鳳凰花" , "觀賞時期":"5月-6月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"烏日區" , "行政區代碼":"66000230" , "地點":"芬園花卉生產休憩園區" , "地址":"臺中市烏日區慶光路12-16號" , "花種":"櫻花" , "觀賞時期":"2-3月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"烏日區" , "行政區代碼":"66000230" , "地點":"知高圳步道" , "地址":"臺中市烏日區中山路三段登寺巷176號" , "花種":"芒花" , "觀賞時期":"10月-11月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"東區" , "行政區代碼":"66000020" , "地點":"樂成公園" , "地址":"臺中市東區東信里一心街與東英五街口" , "花種":"黃金風鈴木" , "觀賞時期":"2月-3月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"南區" , "行政區代碼":"66000030" , "地點":"興大園區" , "地址":"臺中市東區興大路" , "花種":"阿勃勒" , "觀賞時期":"5月-6月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"西區" , "行政區代碼":"66000040" , "地點":"國立臺灣美術館" , "地址":"臺中市西區五權西路一段2號" , "花種":"阿勃勒" , "觀賞時期":"5月-6月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"南屯區" , "行政區代碼":"66000070" , "地點":"文心森林公園" , "地址":"臺中市南屯區文心路一段289號" , "花種":"黃金風鈴木" , "觀賞時期":"2月-3月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"南屯區" , "行政區代碼":"66000070" , "地點":"文心森林公園" , "地址":"臺中市南屯區文心路一段289號" , "花種":"欒樹花" , "觀賞時期":"10月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"南屯區" , "行政區代碼":"66000070" , "地點":"豐樂雕塑公園" , "地址":"臺中市南屯區文心南五路331號" , "花種":"欒樹花" , "觀賞時期":"10月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"西屯區" , "行政區代碼":"66000060" , "地點":"東海大學" , "地址":"臺中市西屯區臺灣大道四段1727號" , "花種":"鳳凰花" , "觀賞時期":"5月-6月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"西屯區" , "行政區代碼":"66000060" , "地點":"都會公園" , "地址":"臺中市西屯區都會園路1215巷140號" , "花種":"木棉花" , "觀賞時期":"4月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"清水區" , "行政區代碼":"66000120" , "地點":"五福圳自行車道" , "地址":"臺中市清水區中山路422-12號" , "花種":"荷花" , "觀賞時期":"6月-8月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"清水區" , "行政區代碼":"66000120" , "地點":"趙家古厝" , "地址":"臺中市清水區荷園街168號" , "花種":"荷花" , "觀賞時期":"6月-8月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"大甲區" , "行政區代碼":"66000110" , "地點":"大甲鐵砧山風景特定區" , "地址":"臺中市大甲區成功路221號" , "花種":"櫻花" , "觀賞時期":"2月-3月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"外埔區" , "行政區代碼":"66000210" , "地點":"水流東桐花步道" , "地址":"臺中市外埔區六支巷路21號" , "花種":"桐花" , "觀賞時期":"4月-5月" },{"縣市":"臺中市" , "縣市別代碼":"10019" , "行政區":"外埔區" , "行政區代碼":"66000210" , "地點":"水頭二路" , "地址":"臺中市外埔區水頭二路" , "花種":"海芋" , "觀賞時期":"4月" }]
Tag:Javascript, json, open data
