2-10 Quiz_Ajax 연습하기(1)
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let i =0; i <rows.length; i++) {
let name = rows[i]['stationName']
let cnt = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']
let temp_html =`<tr>
<td>${name}</td>
<td>${cnt}</td>
<td>${bike}</td>
</tr>`
$('#names-q1').append(temp_html)
}
}
})
}
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let i =0; i <rows.length; i++) {
let name = rows[i]['stationName']
let cnt = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']
❌❌❌ let temp_html=`<td>${name}${cnt}${bike}</td>`❌❌❌
}
$('#names-q1').append(temp_html)
}
})
}
❌ let temp_html
바로 전에 풀었던 미세먼지 지수 퀴즈를 그대로 응용하는 문제였는데 그거 보면서 그 코드를 그대로 따라 쓰는 바람에 틀리고 말았다. (이해는 빠르나 응용이 안되는 편)
<ul id="names-q1">
<li>중구 : 82</li>
<li>종로구 : 87</li>
<li>용산구 : 84</li>
<li>은평구 : 82</li>
</ul>
<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>
미세먼지는 names-q1 안에 li 하나의 코드만 있지만 따릉이는 tr 안에 td가 있는 이중구조였다는 걸 간과한 것이다.
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
그래서 미세먼지는 temt_html에 li 코드 하나만 적어도 되지만 따릉이는 tr, td 둘 다 적어줘야 한다. 멍청한 나는 또 출력될 내용이 td 안에 있으니까 li와 td가 곧이 곧대로 대응이 되는 줄 알았다...^^
그리고 또 하나,
names-q1에 원래부터 적혀있던 내용을 지워야 하는데 그걸 또 놓치고 지나갔다.
<sytle>
.urgent {
color: red;
font-weight: bold;
}
</style>
<script>
function q1() {
$('#names-q1').empty();
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response["getStationList"]["row"];
for (let i = 0; i < rows.length; i++) {
let rack_name = rows[i]['stationName'];
let rack_cnt = rows[i]['rackTotCnt'];
let bike_cnt = rows[i]['parkingBikeTotCnt'];
let temp_html = '';
if (bike_cnt < 5) {
temp_html = `<tr class="urgent">
<td>${rack_name}</td>
<td>${rack_cnt}</td>
<td>${bike_cnt}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${rack_name}</td>
<td>${rack_cnt}</td>
<td>${bike_cnt}</td>
</tr>`
}
$('#names-q1').append(temp_html);
}
}
})
}
</script>
</head>
<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>
<hr />
<div class="question-box">
<style>
.good {
color: blue;
font-weight: bold;
}
.bad {
color: red;
font-weight: bold;
}
</style>
<script>
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://spartacodingclub.shop/sparta_api/seoulbike",
data: {},
success: function (response) {
let rows = response['getStationList']['row']
for (let i =0; i <rows.length; i++) {
let name = rows[i]['stationName']
let cnt = rows[i]['rackTotCnt']
let bike = rows[i]['parkingBikeTotCnt']
let temp_html =``
if (bike > 10) {
temp_html = `<tr class="good">
<td>${name}</td>
<td>${cnt}</td>
<td>${bike}</td>
</tr>`
} else if (bike < 3) {
temp_html = `<tr class="bad">
<td>${name}</td>
<td>${cnt}</td>
<td>${bike}</td>
</tr>`
} else {
temp_html = `<tr>
<td>${name}</td>
<td>${cnt}</td>
<td>${bike}</td>
</tr>`
}
$('#names-q1').append(temp_html)
}
}
})
}
</script>
이번엔 틀린 거 아님. 드디어 응용에 성공한 거임.
예전 수업 때 배운 조건문 중 else if를 활용해서 10보다 많으면 파란색, 3보다 적으면 빨간색으로 구현되도록 짜보았다.
실행하면 이런식으로 출력된다😎
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
let imgurl = response[0]['url']
$('#img-cat').attr('src',imgurl)
}
})
}
function q1() {
$.ajax({
type: "GET",
url: "https://api.thecatapi.com/v1/images/search",
data: {},
success: function (response) {
❌❌❌ let url = response['url'][0] ❌❌❌
}
❌❌❌ $("#img-cat").attr("src","url") ❌❌❌
})
}
❌ let url
이제 변수를 써야하는 상황은 확실히 아는데 변수 유형이 바뀌기라도 하면 그것을 어떻게 호출해야 하는지 응용이 안된다. 여기에선 let imgurl = response[0]['url']를 적기 전, succsses: function(response) 다음에 console.log(response)를 사용했어야 했다.
[{…}]
0:
breeds: []
height: 276
id: "vxMLPUGso"
url: "https://cdn2.thecatapi.com/images/vxMLPUGso.png"
width: 388
__proto__: Object
length: 1
__proto__: Array(0)
개발자 도구에서 확인하면 [0][url]이라는 url의 경로를 파악할 수 있다. 나는 순서만 바꿔서 썼는데 저것도 얻어 걸렸다. 뭘 알고 쓴 게 아니다.
❌ $('#id값').attr(src,변수값) : JQuery를 활용한 이미지의 src 변경
얼핏 보면 맞는 것 같지만 따옴표도 잘못 쓰고 코드도 } 안에 들어가야 한다. 하여튼 잘 안돼서 보면 이런 실수가 90% 이상이라니까...^^