코딩 도전기_09_210708

학습 내용

- Ajax 적용 연습

QUIZ 1 : 서울시 따릉이 API 이용해 거치대 위치, 거치대 수, 따릉이 수 구하기

(1) Ajax 뼈대, 오픈API 주소 가져오기

 <script>
        function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response)
                 })
        }
    </script>

(2) 반복문 이용해 거치대 위치, 수, 따릉이 수 구하기

<script>
        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 name = rows[i]['stationName']
                        let rack = rows[i]['rackTotCnt']
                        let bike = rows[i]['parkingBikeTotCnt']
 }
            })
        }
 </script>

(3) temp_html, .append코드로 홈페이지에 나타나게 하기

<script>
        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 name = rows[i]['stationName'];
                    let rack = rows[i]['rackTotCnt'];
                    let bike = rows[i]['parkingBikeTotCnt'];
                    let temp_html = `<tr>
                                            <td>${name}</td>
                                            <td>${rack}</td>
                                            <td>${bike}</td>
                                        </tr>`
                    $('#names-q1').append(temp_html);
                  }
                }
                })
        }
    </script>

(4) .empty()코드로 지웠다가 새로 자료 받아오게 하기

<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 rack = rows[i]['rackTotCnt'];
                    let bike = rows[i]['parkingBikeTotCnt'];
                    let temp_html = `<tr>
                                            <td>${name}</td>
                                            <td>${rack}</td>
                                            <td>${bike}</td>
                                        </tr>`
                    $('#names-q1').append(temp_html);
                  }
                }
                })
        }
    </script>

• 자전거가 5대 이하인 정류장은 빨간색으로 표시하기

(5) css 설정

<style>
.low {
color: red;
}
    </style>

(6) 조건문으로 5대 이하일 때 / 초과일 때 나누기

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

                        let temp_html =  ``

                        if (bike < 5) {
                            temp_html = `<tr class="low">
                                            <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)
                    }
                }
            })
        }
    </script>

• 처음부터 내 생각대로 코드를 쭉 짜놓고 에러를 찾지 말고,
  하나하나 확인해가며 코드를 짜자 (제발)