항해99 Ajax (2)

9. 서울시 따릉이에 대하여 

업데이트 버튼 클릭시 서울 OpenAPI 를 통해 따릉이 거치대 위치 , 거치대 수, 따릉이 수 정보 가져오자.

 

 

우선 업데이트해서 값을 가져올 url 링크를 복사 붙혀넣기를 한다.

 

function q1() {
        $('#names-q1').empty()
        $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/seoulbike",
        data: {},
        success: function (response) {

            }
            })
        }

 

 

그 후 rows로 여러개의 row를 지정해주고

 

let rows = response['getStationList']['row']

 

 

내가 가져올 값인 

name(거치대 위치), rack(거치대에 있는 자전거), bike(현재 가능한 자전거 개수)를 불러온다.

 

for (let i = 0;  i < rows.length; i++) {
    let name = rows[i]['stationName']
    let rack = rows[i]['rackTotCnt']
    let bike = rows[i]['parkingBikeTotCnt']

 

 

사이트에서 반복되는 업데이트 내용을 방지하려면 

 

.empty()

 

를 쓰면 반복되는 문장이 지워지고 새로운 업데이트된 자료만 뜬다.

 

 

 

빈 백틱을 먼저 사용해서 temp_html 을 정해주고

따릉이 수가 5보다 적으면 빨간색으로 나오게 해주고

그렇지 않으면 검은색으로 보이게 해주자

 

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)

 

 

 

 

10.

• 이미지 바꾸기 : $("#아이디값").attr("src", 이미지URL);
• 텍스트 바꾸기 : $("#아이디값").text("바꾸고 싶은 텍스트");

 

<img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
<h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>

 

 

기존 url에서 내가 가져오고 싶은 이미지와 텍스트를 불러옵니다.

 

uccess: function (response) {
    let url = response['url']
    let msg = response['msg']

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

    }

 

 

11. 현재 기온 표시하기 

 

먼저 내가 기온을 표시하고 싶은곳에 P태그를 먹여준다.

<p>현재기온 : <span id = "temp">36</span>도</p>

 

 

 

그 후 script를 하나 만들어서 기온을 표시해주면 된다.

<script>
    $(document).ready(function(){
        $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/weather/seoul",
        data: {},
        success: function (response) {
            $('#temp').text(response['temp'])

            }
            })
    });

</script>