2022-08-22~2022-08-24 SpartaCoding Club 웹개발 종합반 2주차-2

1. ajax 활용 (서울시 날씨 데이터)

 

function q1() {
  $('#names-q1').empty()
  $.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/seoulair",
    data: {},
    success: function (response) {
      let rows = response['RealtimeCityAir']['row']
      for (let i= 0; i < rows.length; i++) {
        let gu_name = rows[i]['MSRSTE_NM']
        let gu_mise = rows[i]['IDEX_MVL']

        let temp_html = ``
        //<li class="bad">${gu_name} : ${gu_mise}</li> 처음에는 넣어주고 밑에 if문 설정 완료 되면 공간 비우기

        if (gu_mise > 40) {
           temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
        } else {
           temp_html = `<li>${gu_name} : ${gu_mise}</li>`

        }

        $('#names-q1').append(temp_html)

      }

    }
  })
}

//$('#names-q1').empty() 기존꺼 지우고 새로 업데이트

 

 

 

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

.empty()

해당 코드를 맨 윗줄에 둘 경우 .ajax 콜하기 전에 지우고 콜함 없으면 누적되면서 쌓임

기존꺼 지우고 새로 업데이트

 

 

 

 

let rows = response['RealtimeCityAir']['row']
for (let i= 0; i < rows.length; i++) {
  let gu_name = rows[i]['MSRSTE_NM']
  let gu_mise = rows[i]['IDEX_MVL']

위치같은거 참고해서 넣으면 될듯

 

 

let temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`

 

let temp_html = ``

<li class="bad">${gu_name} : ${gu_mise}</li> 처음에는 넣어주고 if문 설정 완료 되면 공간 비우기

if, else 앞에 let도 지우기

 

 

 

if (gu_mise > 40) {
   temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
   temp_html = `<li>${gu_name} : ${gu_mise}</li>`

gu-mise 값이 만약에 40 보다 크면 class="bad"(text 빨간색 표시) 가 되고

그게 아니면 검정으로 표시

 

 

 

 

2. ajax 활용 (서울시 따릉이 데이터)

 

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)


        }


    }
  })
}

 

 

 

 

3. ajax 활용 (api 이용)

 

function q1() {
  $.ajax({
    type: "GET",
    url: "http://spartacodingclub.shop/sparta_api/rtan",
    data: {},
    success: function(response){
        let url = response['url'];
        let msg = response['msg'];
        
        $("#img-rtan").attr("src", url);
        $("#text-rtan").text(msg);
      }
    })
}

 

 

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

 

 

4. ajax 활용 (2주차 최종 과제)

 

 

실시간 서울시 온도

 

 

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

        }
    })
})

 

 

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

span으로 묶어서 앞에 0.00만 바뀌도록 설정