혼자 해냈는데 삐긋했다. 뭐냐면
기본뼈대에서
response를 console에 찍어보면
object가 하나 찍혔다.
getStationList 안에 여러가지 있고 우리가 필요한건 row이다.
let rows = response['']안에 뭘 넣어줘야 하냐면
getStationList 안에 row를 가져와야하니까
let rows = response['getStationList']['row']
console로 보면
(99)[{...},{...},{...},...{...}]
리스트(딕셔너리)가 잘 찍혀 있다.
거치대 위치,거치대 수,현재 거치된 따릉이 수
for문으로 돌려준다.
console 찍어주면
거치대 위치,거치대 수,현재 거치된 따릉이 수 순서대로 리스트가 잘 찍힌다.
이제 temp_html을 붙여줄것인데
실시간 데이터 모양을 완성 시켜줄 틀은 뭐냐 보면
<td>104. 합정역 1번출구 앞</td>
<td>16</td>
<td>0</td>
</tr>이것인데
tr이 맞나 헷갈리면
복사해서 그 아래에 붙여주면 된다.
브라우저에 가보면 아래에 하나 더 붙여져 있다.
본인은 아까 tr을 temp_html 붙일때 li로 바꿔서 표가 안떴다 ㅠ
붙여서 JQuery 다뤄보기 회차 마지막에 했던
title에 변수를 만들어서 내용에 수정에서 붙여놓을때 썼던
let temp_html =`(card div 내용...${title}...)`
${} 이거를 이용해서
name,rack,bike를 차례대로 넣어 놓는다.
temp_html을 어디다 붙이냐면
tr들을 감싸고 있는 tbody에 붙여논 id값을 가져오면 된다.
처음에 있던것들이 남아있으니
tbody안의 tr들을 제거해준다.
업데이트 누를때마다 아래에 이어서 붙으니
ajax콜 부르기전
$('#names-q1').empty()
를 붙여준다.
이제 따릉이 수 5보다 작으면 빨간색으로 표시해줄건데
쉽게 먼저 전체 빨간색으로 표시해준다.
temp_html에 tr에 class를 붙이고
style에서 color red로 지정해 준다.
5보다 작으면 따릉이 수만 표시해줄거니까 if문을 써준다.
let temp_html = ``
👉빈값으로 둘거라서 작은따옴표도 상관없다.
5이하는 class먹인걸로 두고 (urgent가 붙은 tr 문자열을 넣어줬고)
5보다 크거나 5랑 같으면 (else) class 안먹인걸로 둔다.
그리고 이걸로 names-q1에 붙였다.
