커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
어떻게 하면 숫자가 세자리로 안 나오게 할 수 있나요?
undefined주차
정*진
댓글
3
・
추천
0
・
조회수
8
조회수
8
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
캡처한 사진의 "현재 거치된 따릉이 수"를 봐주세요.
강의에서는 숫자가 3이나 13 이렇게 나와요. 그런데 제가 웹페이지를 만들어서 보면 013 이런 식으로 출력됩니다. 문제가 무엇이고, 어떻게 하면 0을 없앨 수 있을까요?
궁금합니다.
작성한 코드 및 에러 메세지
오류 발생 시, 작성한 코드
전체와 에러 메시지를 첨부해 주세요.
Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.
Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fetch 연습하고 가기!</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;
}
.five {
color: red;
}
</style>
// q1을 누르면 fetch를 이용해서 데이터를 가져온다.
// getStationList에서 row값을 가져와서 rows에 넣는다.
// rows를 이용해서 반복문을 만들고, temp_html을 만들어서 붙여준다.
// name, rack, bike를 넣어서 temp_html을 만들고 그대로 붙여준다.
<script>
function q1() {
fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {
let rows = data['getStationList']['row']
$('#names-q1').empty()
rows.forEach((a) => {
let name = a['stationName']
// 거치대 위치
let rack = a['rackTotCnt']
// 거치대 수
let bike = a['parkingBikeTotCnt']
// 현재 거치된 따릉이 수
let temp_html = ``
if (bike < 5) {
temp_html = `<tr class= "five">
<td>${name}</td>
<td>${rack}</td>
<td>0${bike}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${name}</td>
<td>${rack}</td>
<td>0${bike}</td>
</tr>`
}
$('#names-q1').append(temp_html)
})
})
}
</script>
</head>
<body>
<h1>Fetch 연습하자!</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>
댓글 알림
