이전 글들에서 다뤘던 jQuery와 Ajax를 사용해보자.
이번에는 서울시에서 사용되고 있는 공유 자전거 '따릉이' API를 활용해 연습을 해볼 것이다.
url : 서울시 열린 데이터 광장 / 공공자전거 실시간 정보
http://data.seoul.go.kr/dataList/OA-15493/A/1/datasetView.do
위의 주소로 들어가게 되면 '서울 열린 데이터 광장' 사이트가 열린다.
서울특별시 공공자전거인 '따릉이'의 OpenAPI를 가져올 수 있다.
Open API를 이용하기 위해서는
OpenAPI 인증키를 신청하고, 아래에 나와 있는 방법으로
따릉이의 API를 가지고 오면 된다.
OpenAPI 주소를 가져와 웹에 붙여넣기 하면
아래와 같이 볼 수 있다.
아래처럼 정렬되어 보이지 않고 마구잡이로
한눈에 알아볼 수 없게 나타난다면
이전 글을 참고하여 JSONView 구글 확장 프로그램을 다운 받으면 된다.
https://parkjh7764.tistory.com/10
해당 OpenAPI는 실제로 '따릉이' 앱에서도 사용하고 있는 API로
'실시간'인 점을 알아두어야 한다.
그렇기 때문에 값이 매일 바뀔 수 있다.
내가 가져온 API에서 활용할 부분은
stationName과 rackTotCnt, parkingBikeTotCnt이다.
stationName: 따릉이 정류장
rackTotCnt : 따릉이 거치대 수
parkingBikeTotCnt : 현재 거치되어 있는 따릉이 수
여기서 의아한 점은 따릉이 거치대 수보다
거치되어 있는 따릉이 수가 더 많은 경우도 있는데
이는 직접 현장에 가봐야 알 것 같다...
거치대에 거치 안 하고 근처에 세워놓은 걸 수도 있다...
그럼 이제 OpenAPI를 활용해보자.
이전 글에서 다뤘던 예제와 유사하게
'업데이트' 버튼을 눌렀을 때
'따릉이의 위치, 거치대 수, 현재 거치대에 거치되어 있는 따릉이 수' 를
가져와 보는 예제이다.
기본 틀은 아래와 같으며
이전 글에서 다뤘던 미세먼지 업데이트와 다른 점은
리스트를 표 형태로 가져온다는 것과
거치대 위치, 거치대수, 거치된 따릉이 수 3개의 데이터 값을 가져온다는 것이다.
같은 점은 업데이트 버튼을 눌렀을 때기존에 있던 데이터가 사라지고, 새롭게 쓰여져야 한다는 것이다.
기본 틀에 대한 HTML <body> 부분은 아래와 같다.
여기서 Ajax를 활용할 것이기 때문에 jQuery를 <head> 부분에
임포트 해주어야 한다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
그리고, 표 형태를 한 눈에 알아보기 쉽게 하기 위해
CSS로 매우 간단한 스타일을 주었다.
<head>
<meta charset="UTF-8">
<title>JQuery_Ajax_연습</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style type="text/css">
div.question-box {
margin: 10px 0 20px 0;
}
table {
border: 1px solid;
border-collapse: collapse;
}
td,
th {
padding: 10px;
border: 1px solid;
}
</style>
</head>
<body>
<h1>이전에 다룬 jQuery와 Ajax를 활용해보자</h1>
<hr />
<div class="question-box">
<h2>서울시 따릉이 OpenAPI 사용하기</h2>
<p>모든 위치의 따릉이 현황을 보여주세요</p>
<p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
<button onclick="q1()">업데이트</button>
<table>
<thead>
<tr>
<td>거치대 위치</td>
<td>거치대 수</td>
<td>현재 거치된 따릉이 수</td>
</tr>
</thead>
<tbody id="names-q1">
<tr>
<td>102. 망원역 1번출구 앞</td>
<td>22</td>
<td>0</td>
</tr>
<tr>
<td>103. 망원역 2번출구 앞</td>
<td>16</td>
<td>0</td>
</tr>
<tr>
<td>104. 합정역 1번출구 앞</td>
<td>16</td>
<td>0</td>
</tr>
</tbody>
</table>
</div>
</body>
그렇다면 위의 102. 망원역 1번 출구 앞/ 22/ 0의 양식처럼
API로부터 데이터를 가져와보자.
우선 API 주소로 부터 데이터를 가져오기 위해서
<script> </script> 부분에 ajax의 기본 틀을 사용해야 한다.
$.ajax({
type: "GET",
url: "여기에URL을입력",
data: {},
success: function(response){
console.log(response)
}
})
기본 틀을 사용해 따릉이 API에서
거치대 위치, 거치대 수, 거치된 따릉이 수 데이터를 가져와
<tr></tr>과 <td></td> 표를 만드는 html 태그를 사용해 table에 붙여주기만 하면 된다.
우선 코드를 모두 작성하게 되면
'업데이트' 버튼을 눌렀을 때 기존에
<body> 부분에 적었던 id = "names-q1"을 가진 부분은 지워지면서
새롭게 따릉이 데이터를 가져오게 된다.
데이터를 가지고 오는 동시에 표로 작성이 된다.
Ajax를 활용한 부분의 코드이다.
<script>
function q1() {
$.ajax({
type: "GET",
url: "<--여기는 가져온 코드를 넣으세요-->",
data: {},
success: function(response){
$("#names-q1").empty()
let bike_list = response["getStationList"]["row"]
for (let i = 0; i < bike_list.length; i++){
let name_stat = bike_list[i]["stationName"]
let rack_cnt = bike_list[i]["rackTotCnt"]
let park_bike = bike_list[i]["parkingBikeTotCnt"]
let tr_bike = `<tr>
<td>${name_stat}앞</td>
<td>${rack_cnt}</td>
<td>${park_bike}</td>
</tr>`
$("#names-q1").append(tr_bike)
}
}
})
}
</script>
여기서 조금 더 추가적인 요소를 반영하자면
이전 글에서도 다뤘던 if문을 활용해 해당 수치보다 낮으면
다른 색깔로 표시되도록 해보자.
아래는 현재 거치된 따릉이 수가
2대 이하일 때 빨간색으로 나타나게 한 것이다.
아래와 같이 class = "tr_color"를 클래스로 부여하고,
해당 클래스를 <style></style> 부분에 선언을 해주어야 한다.
색깔은 원하는 색으로 넣어도 좋다.
if문으로 park_bike < 3 일 때로 나뉘어 데이터가 작성되도록 한 것이다.
<script>
function q1() {
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function(response){
$("#names-q1").empty()
let bike_list = response["getStationList"]["row"]
for (let i = 0; i < bike_list.length; i++){
let name_stat = bike_list[i]["stationName"]
let rack_cnt = bike_list[i]["rackTotCnt"]
let park_bike = bike_list[i]["parkingBikeTotCnt"]
let tr_bike = ``
if(park_bike < 3){
tr_bike = `<tr class="tr_color">
<td>${name_stat}앞</td>
<td>${rack_cnt}</td>
<td>${park_bike}</td>
</tr>`
}
else{
tr_bike = `<tr>
<td>${name_stat}앞</td>
<td>${rack_cnt}</td>
<td>${park_bike}</td>
</tr>`
}
$("#names-q1").append(tr_bike)
}
}
})
}
</script>
댓글