2.9 Ajax 연습

필기를 했는데///
Ajax intro와 Ajax 하던 게 다 날라감;;;;

무튼 2.9부터 그대로 진행. 내 진도가 너무 느려서;;;

function q1() {
        $.ajax({
            type: "GET",
            url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
            data: {},
            success: function (response) {
                let rows = response['RealtimeCityAir']['row']
                for (let i=0; i < rows.length; i++){
                    console.log(rows[i])
                }

}
})
}
.......................

중간 중간마다 입력한 값들이 잘 기록되었는지 console.log()로 브라우저 console 창에서
확인하면서 적어나가기!!
밑의 코드는 데이터가 추가가 되어 계속 값이 붙는다..
function q1() {
.ajax({ type: "GET", url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99", 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>{gu_name} : ${gu_mise} `
$('#names-q1').append(temp_html)
}
}
})
}

추가되기 전에 먼저 지우고 추가하는 방법은??!!!!
밑의 코드를 이용하면 된다! $('#names-q1').empty() 를 ajx 시작 전에 적용시키기!
#를 안 적어서 계속 오류가 났었음....여기서 기호를 잘 보고 입력을 해야 할 듯

    function q1() {
        $('#names-q1').empty()
        $.ajax({
            type: "GET",
            url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
            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>${gu_name} : ${gu_mise} </li>`
               $('#names-q1').append(temp_html)
                }

}
})
}

기록되는 값이 전체가 빨간색으로 표현이 되기 위해서는

Style 안에서 설정을 이렇게 해주고
.bad{
color: red;
}

ajax 밑에는
let temp_html = <li class="bad">${gu_name} : ${gu_mise} </li>

이렇게 하면 표시되는 값들이 전부 빨간색으로 나온다.

#이젠 부분적으로 빨간색으로 만들고 싶다.
미세먼지가 55 초과되는 것만 빨간색으로 만들려면 이렇게 코드를 넣으면 된다.
function q1() {
$('#names-q1').empty()
$.ajax({
type: "GET",
url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
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 =``
                    if (gu_mise > 55){
                     temp_html = `<li class="bad">${gu_name} : ${gu_mise} </li>`
                } else {
                     temp_html = `<li>${gu_name} : ${gu_mise} </li>`}
               $('#names-q1').append(temp_html)
                }

}
})
}