今天算是番外篇,看到邦友-八八這篇文章開始串資料:電動機車充電站,就想結合一下之前學到的 jQuery ajax 接 OpenData,搭配 Bootstrap 做成動態表格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Document</title>
<script>
$(function(){
$.ajax({
url: "https://api.kcg.gov.tw/Api/Service/Get/bf5d5f44-24e0-4177-93a2-3cd9539c082c",
dataType: "json",
success: show,
error: function(){
alert("error");
}
});
});
function show(data){
console.log(data);
console.log(data.data);
let arryData = data.data
arryData.forEach((x) => {
document.getElementById('content_list').innerHTML +=
'<tbody class="list">'
+ '<tr><th class="charge">' + x.計費方式 + '</th>'
+ '<th class="location">' + x.設置地點 + '</th>'
+ '<th class="address">' + x.設置地址 + '</th></tr>'
+ '</tbody>';
});
}
</script>
</head>
<body>
<table id='content_list' class="table table-hover">
<thead class="thead-dark">
<tr>
<th>收費</th>
<th>地點</th>
<th>詳細地址</th>
</tr>
</thead>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</body>
</html>
原本的資料引入之後,不方便我們閱讀,所以需要做成表格
是受到 JavaScript 物件實體語法啟發的傳輸格式,比起使用 XML 傳輸資料,JSON 格式在檔案大小上更為輕量,也是現在主流的傳輸格式。
今天實作這個資料表,也遇到不少問題,怎麼接不到?接到了怎麼套用 Bootstrap?
解決問題,最後有成果,真的蠻有成就感的,你也一起來挑戰吧! GO GO GO!