* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
2-11까지는 아무 문제 없이 잘 되었습니다.
하지만 2-12는 무엇을 잘못했는지 찾을 수가 없어서 즉문즉답 게시판을 찾게 되었습니다.
시도한 노력:
(1) 정답지와 비교
스니펫과 일부 다른 변수들을 사용하긴 했지만, 정답과 무엇이 다른지 모르겠삽니다.
(2) IDE에서 빨간색 줄을 따라 오류 코드가 무엇인지 찾아보고, 일부 코드는 수정하였으나.....
포기하고 도움을 요청 드리고자 합니다.
감사합니다.
작성한 코드 및 에러 메세지
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JQuery 연습하고 가기!</title>
<!-- JQuery를 import 합니다 -->
<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;
}
.bad {
color: red;
font-weight: bold;
}
</style>
<script>
function q1() {
{
// 여기에 코드를 입력하세요
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let bike_list = response['getStationList']['row'];
for (let i = 0; i < bike_list.length; i++) {
let location_data = bike_list[i]['stationName'];
let parking_data = bike_list[i]['rackTotCntL'];
let parked_bike_data = bike_list[i]['parkingBikeTotCnt'];
let html_temp = ``;
if (parked_bike_data < 5) {
html_temp = '<tr class = "bad">
<td>${location_data}</td>
<td>${parking_data}</td>
<td>${lparked_bike_data}</td>
</tr>`
} else {
html_teml = '<tr>
<td>${location_data}</td>
<td>${parking_data}</td>
<td>${lparked_bike_data}</td>
</tr>`
}
$('#names-q1').append(html_temp)
}
}
})
}
}
</script>
</head>
<body>
<h1>jQuery + Ajax의 조합을 연습하자!</h1>
<hr />
<div class="question-box">
<h2>2. 서울시 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>
</html>오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
