따릉이 OpenAPI로 Ajax연습하기!

문제

• 2. 서울시 OpenAPI(실시간 따릉기 현황)를 이용하기
• 모든 위치의 따릉이 현황을 보여주세요
• 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.
• 5대 미만은 빨간색으로 표시할 것!

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 rack = rows[i]['rackTotCnt']
                        let bike = rows[i]['parkingBikeTotCnt']
                        let temp_html = ``

                        if(bike > 5 ){
                           temp_html= `<tr class="urgent">
                                            <td>${name}</td>
                                            <td>${rack}</td>
                                            <td>${bike}</td>
                                        </tr>`
                        }else{
                            temp_html= `<tr>
                                            <td>${name}</td>
                                            <td>${rack}</td>
                                            <td>${bike}</td>
                                        </tr>`
                        }

                        $('#names-q1').append(temp_html)

*  $.ajax({
                type: "GET",
                url: "url 비공개",
                data: {},
                success: function (response) {
                
                }
                            

type : "GET"으로 기본 ajax 형태를 가지고 온다.
페이지에 필요한 정보인 거치대 위치, 거치대 수, 현재 거치된 따릉이 수를 가지고 온다.
let rows = (response['getStationList']['row'])

for문으로 거치대이름,거대치 수, 현재 거치된 따릉이 수를 각 name, rack, bike 변수에 넣어주었다.

if문으로 bike가 5 개 미만일 때는 temp_html에 .urgent {color:red;} css와 연결된
temp_html으로 빨간색으로 표시하고, 아니면 temp_html을 넣어서 표시하지 않는다.

('#names-q1').append(temp_html) 로 추가한다. 덧붙여지지 않도록 업데이트 버튼을 누를때마다 names-q1이 없어졌다가 다시 생성될 수 있도록('#names-q1').empty()를 넣어준다.

onclick 시 이미지 변경 및 제목변경

3. 캐릭터 API를 이용하기!
   아래를 캐릭터 사진으로 바꿔주세요.
   업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.

르탄이 나와 버튼을 클릭하면 이미지가 바뀐다!

만들어보자구!

2문제 풀고, 의기양양해져서 풀어본다고 나섰다가, 된통 당해버렸다.
생각보다 구조는 간단했는데.. url 사진이 계속 변경되려면 .attr 을 써야했다.
근데 생각해보니 검색할 생각도 안하고 뭐지 하다가 강의를 돌려버리고 말았다..

ajax의 기본구조부터

$.ajax({
                type : "GET",
                url : "url 비공개",
                data:{},
                success : function (response){
                
                }

몇번만 써보면 이제 익숙해질 것 같다. 막상 쓸 때는 잘 안되는데 천천히 더듬으면 가능한 것 같다. 아무튼 API를 들어가서 필요한 정보를 console에서 찾았다.
사진은 url로, 아래 이미지와 매칭되는 제목은 msg 로 되어있었다.

			let url = response['url']
            let msg = response['msg']

            $('#img-rtan').attr('src', url)
            $('#text-rtan').text(msg)

url과 msg를 변수에 담는다.
여기서 안배운 것이 .attr 인데.. 이미지를 바꿀 때는 attr을 쓴다느..
오늘 jQuery는 .attr 과 .text를 배웠고 API에서 Ajax콜 하는 방법을 배워봤다.!

###완성본

르탄이 나와 버튼을 누르면 계속 바뀐다.
공부하느라 밖에도 못나가고 있는데 여행가고싶어서 올려봤다.
오늘은 여기까지 ..빨리 집을 탈출해서 서울로 가고 싶다.