Ajax QUIZ 02 - 따릉이 OpenAPI

QUIZ 02 - 따릉이 API를 이용하여 실시간 따릉기 현황 보기 구현

 

완성본

따릉이 url : http://spartacodingclub.shop/sparta_api/seoulbike

html 뼈대는 <전체 code> 참고.

 

앞선 QUIZ 01 문제와 유사하니 복습하는 시간이다 생각하고 풀어보자!

 

 

우선 뼈대에 url 과 필요한 데이터 값을 변수에 담아주고 잘 담아졌는지 콘솔창에 확인해보자

 

-필요 데이터-

/** 거치대 위치 stationName , 거치대 수 rackTotCnt, 현재 거치된 따릉이 수 parkingBikeTotCnt  **/

<script>

    /** 거치대 위치 stationName , 거치대 수 rackTotCnt, 현재 거치된 따릉이 수 parkingBikeTotCnt  **/
    function q1() {
        $.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 station_name = rows[i]['stationName'];
                    let station_rack = rows[i]['rackTotCnt'];
                    let station_bike = rows[i]['parkingBikeTotCnt'];
                    console.log(station_name, station_rack, station_bike );
                }
            }
        })
    }
</script>

 

콘솔창에 정상적으로 출력 확인

 

 

 

이번엔 <table>을 사용했으니

temp_html 에 <tr><td> 를 사용하여 값을 담아준다.

 

 

<script>

    /** 거치대 위치 stationName , 거치대 수 rackTotCnt, 현재 거치된 따릉이 수 parkingBikeTotCnt  **/
    function q1() {
        $.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 station_name = rows[i]['stationName'];
                    let station_rack = rows[i]['rackTotCnt'];
                    let station_bike = rows[i]['parkingBikeTotCnt'];

                    let temp_html = `<tr><td>${station_name}</td><td>${station_rack}</td><td>${station_bike}</td></tr>`
                    $('#names-q1').append(temp_html);

                    /**
                    let temp_html1 = `<tr><td>${station_name}</td>`
                    let temp_html2 = `<td>${station_rack}</td>`
                    let temp_html3 = `<td>${station_bike}</td></tr>`
                    $('#names-q1').append(temp_html1 + temp_html2 + temp_html3);
                    **/
                }
            }
        })
    }
</script>

 

데이터 정상 출력

 

 

empty()로 업데이트 버튼 클릭시 초기화 한 후 불러오게 하고

'거치된 따릉이 수' 가 5개 미만인 경우 빨간색으로 표시해보자 ( css )

 

.lack{
    color: red;
}

<script>

    /** 거치대 위치 stationName , 거치대 수 rackTotCnt, 현재 거치된 따릉이 수 parkingBikeTotCnt  **/

    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 station_name = rows[i]['stationName'];
                    let station_rack = rows[i]['rackTotCnt'];
                    let station_bike = rows[i]['parkingBikeTotCnt'];

                    let temp_html = ``;

                    if (station_bike < 5){
                         temp_html = `<tr class="lack">
                                             <td>${station_name}</td>
                                            <td>${station_rack}</td>
                                            <td>${station_bike}</td>
                                       </tr>`;
                    } else {
                         temp_html = `<tr>
                                             <td>${station_name}</td>
                                             <td>${station_rack}</td>
                                             <td>${station_bike}</td>
                                          </tr>`;
                    }
                    $('#names-q1').append(temp_html);
                    
                }
            }
        })
    }
</script>

정상 출력

 

 

한번더 복습하는 시간을 가져보니 쑥~ 스무스 하게 넘어갔다.ㅎㅎ

OpenAPI 사용하여 출력하기 마스터!