Ajax로 서울시 실시간 따릉이 현황(OpenAPI)

by 본투비곰손 2022. 11. 29. 23:42

728x90

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>JQuery 연습하고 가기!</title>
    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }

        table {
            border: 1px solid;
            border-collapse: collapse;
        }

        td,
        th {
            padding: 10px;
            border: 1px solid;
        }
        .low{
            color: red;
        } // low 클래스 가진 태그는 글씨가 붉은색
    </style>

    <script>
        function q1() {
            $('#names-q1').empty(); // 시작하거나 버튼 클릭시 초기화 후 아래 내용 표시
            $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/seoulbike",
        // 따릉이현황 OpenAPI url
        data: {},
        success: function(response){
                let rows =response['getStationList']['row']; 
                // API url을 접속하여 구조를 확인하고 rows에 배열을 변수로 선언한다.
                for(let i = 0 ; i<rows.length; i++){
                    let station_name=rows[i]['stationName'] //i번째 정거장이름을 변수로 선언
                    let total_bike=rows[i]['rackTotCnt']//i번째 총자전거랙 숫자를 변수로 선언
                    let parking_bike=rows[i]['parkingBikeTotCnt']
                    //i번째 거치된 자전거 숫자를 변수로 선언
                    let temp_html = `` //공란을 변수 선언
                    if(parking_bike<10){ // 거치된 자전거 숫자가 10대 이하일경우 아래와 같이 태그삽입
                        temp_html=`
                        <tr class="low">
                            <td>${station_name}</td>
                            <td>${total_bike}</td>
                            <td>${parking_bike}</td>
                        </tr>
                        `
                    }else{// 그렇지 않을경우 아래와 같이 태그 삽입
                        temp_html=`
                        <tr>
                            <td>${station_name}</td>
                            <td>${total_bike}</td>
                            <td>${parking_bike}</td>
                        </tr>
                        `
                    }
                    $('#names-q1').append(temp_html);

                    }

                }     
            })
        }
        
    </script>

</head>

<body>
    <h1>jQuery + Ajax의 조합을 연습하자!</h1>

    <hr />

    <div class="question-box">
        <h2>2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기</h2>
        <p>모든 위치의 따릉이 현황을 보여주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>
        <table>
            <thead>
                <tr>
                    <td>거치대 위치</td>
                    <td>거치대 수</td>
                    <td>현재 거치된 따릉이 수</td>
                </tr>
            </thead>
            <tbody id="names-q1">
                
            </tbody>
        </table>
    </div>
</body>

</html>

728x90

'CS전공 지식 > 웹서비스 이해하기' 카테고리의 다른 글

mongoDB에 가입하고 사용해보기 (0)	2022.12.02
파이썬을 이용한 웹 크롤링 (네이버영화) (0)	2022.12.02
Ajax를 사용하여 이미지와 텍스트 불러오기 (0)	2022.11.30
Ajax로 서울시 미세먼지 상태 보기(OpenAPI) (0)	2022.11.29
서버 클라이언트 통신 이해하기 (0)	2022.11.29