2주차-JQuery & Ajax연습 1

**1. for문 + If문 결합 예시

1)for문으로 구네임과 구의 미세먼지수치 불러오기(반복문)

2)if문으로 해당 미세먼지의 숫자가 70 이하인 구만 불러오기

$.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'] //rows의 i번째의 구네임
        let gu_mise = rows[i]['IDEX_MVL']  //rows의 i번째의 미세먼지수치
        if( gu_mise < 70) {
        console.log(gu_name,gu_mise) //console창으로 검사해서 제대로 나오는지 확인
 }
  }
})

**2. 화면에 뜨게하고 버튼 누를 때마다 결과값이 새로 나오게하기

1)화면에 뜨게하기

2)버튼 누를 때마다 결과값이 다 지워지고 새로 나오게 하기

  $('#names-q1').empty() //결과값이 다 지워지게하는 것
            $.ajax({
                type: "GET",
                url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99", //url가져오기
                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>` //html로 띄우는 과정				console.log(temp_html) //console창으로 구네임:미세수치 확인하기
                            $('#names-q1').append(temp_html) //결과값이 names-q1에 떠야하므로 .append 사용하기
                    }
                }
            })

**3. 결과값에 색 주는 법

1)style 창에 색 넣어주기

2)조건문으로 특정 결과값만 색 넣어주기

 <style>
 .bad {
      color : red;
  }
  </style>
  

• let temp_html = <li class="bad">${gu_name} : ${gu_mise}</li> //class=bad로 명칭달아주기

응용) 조건문을 이용하여 특정 결과값에 색 넣어주기 ex)미세먼지수치 70초과인 곳 색깔지정하기

let temp_html = `` //temp_html 값을 일단 공란으로 지정할 것!! (백틱이나 따옴표 상관X)

   if (gu_mise > 70){
      temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>` //명칭단 곳만 적용
   } else {
      temp_html = `<li>${gu_name} : ${gu_mise}</li>` //명칭없음
   }