[Ajax] (3) Quiz

728x90

Ajax 퀴즈 1

이번에 할 문제풀이는

서울시 OpenAPI를 이용하여 아래표와 같은 실시간 리액트형 사이트를 제작하는 것이다.

기본적으로 주어진 코드

<!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;
        }
    </style>

    <script>
        function q1() {
// 여기에 코드를 입력하세요
        }
    </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">
        <tr>
            <td>102. 망원역 1번출구 앞</td>
            <td>22</td>
            <td>0</td>
        </tr>
        <tr>
            <td>103. 망원역 2번출구 앞</td>
            <td>16</td>
            <td>0</td>
        </tr>
        <tr>
            <td>104. 합정역 1번출구 앞</td>
            <td>16</td>
            <td>0</td>
        </tr>
        </tbody>
    </table>
</div>
</body>

</html>

해당 코드를 활용해 사이트를 제작해보자

<script>
        function q1() {
// 여기에 코드를 입력하세요
        }
    </script>

우선 function q1() 코드에 ajax 기본코드를 넣어주자

<script>
    function q1() {
        $.ajax({
            type: "GET",
            url: "여기에URL을입력",
            data: {},
            success: function (response) {
                console.log(response)
            }
        })
    }
</script>

그 후에 "여기에URL을입력"란에 따릉이OpenAPI를 넣어주자,

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

그리고 나서 콘솔창을 키고 업데이트 버튼을 누르면

getStationList 라는 데이터가 보여질것이다. 세부 데이터를 확인해보면

이와같은 창이 나타나게 된다.

그럼 더 세부사항을 콘솔창에서 확인할 수 있게

console.log(response)

여기에 ['getStationList']['row'] 값을 가져와보자.

console.log(response['getStationList']['row'])

입력해주고 업데이트 버튼을 눌러준 후 콘솔창을 확인해보면

세부사항이 업데이트 되어있는것을 확인할 수 있다.

이제 가져와봤으니 해당 문구를 for문으로 돌려야겠다.

<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']

                   console.log(name,rack,bike)
                }
            }
        })
    }
</script>

위와같은 코드가 만들어진다.

지금까지 데이터를 잘 가지고 오고 있는지 확인하기 위해서 콘솔로그로 출력해보자

콘솔창을 보면

성공적으로 데이터를 출력하고 있는 모습을 볼 수 있다.

자 그럼 사이트에 해당 데이터를 출력해주려면, 이제 해야할건 뭐다?

temp_html을 해줘야한다.

<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>

해당 temp_html을 활용해주면

이런 출력화면이 나타나게 된다.

근데, 업데이트를 누르면 계속 추가적으로 붙는다.

이때 활용했던 .empty() 기억나나?

2022.12.27 - [IT/Ajax] - [Ajax] (2) 연습하기

[Ajax] (2) 연습하기

Ajax 연습하기 jQuery+Ajax의 조합을 연습하자! 1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기 모든 구의 미세먼지를 표기해주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.

jrogrammer.tistory.com

해당 구문 활용하여 기입해보자

$('#names-q1').empty()

function q1() 제일 위에 기입해주면 된다.

그리고 마지막으로 5개보다 적은 곳을 빨간색으로 칠해주는 방법을 한번 더 해보자

우선 원래 하듯이

<style type="text/css">

스타일 구문에 bad라는 그룹을 만들어 글자색을 빨갛게 설정해주자.

.bad {
    color : red;
}

그다음 if else 와 같은 조건문을 넣어주자.

<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="bad">
                                        <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>

이렇게 넣어주고 업데이트 버튼을 누르면

자전거 숫자가 5보다 적은곳은 빨간글씨로 나타나게 되는것을 확인할 수 있다.

-끝-

728x90

저작자표시

'📁𝐩𝐫𝐨𝐠𝐫𝐚𝐦𝐦𝐢𝐧𝐠𝐋𝐚𝐧𝐠𝐮𝐚𝐠𝐞 > Python' 카테고리의 다른 글

[Python] 파이썬 기초공부 (2)	2022.12.28
[Ajax] (4) Quiz_2 (0)	2022.12.27
[Ajax] (2) 연습하기 (0)	2022.12.27
[Ajax] (1) 시작하기 (0)	2022.12.27
[JQuery] 복습하며 정리하기 (1) (0)	2022.12.26