http://spartacodingclub.shop/sparta_api/seoulbike

JQuery 연습하고 가기!

<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;
    }
    .urgent {
        color: red;
</style>

<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="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)
              }
          }
      })
    }
</script>

jQuery + Ajax의 조합을 연습하자!

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