Ajax 함께 연습하기 (미세농도 지수별 색 표현하기)

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

Ajax 함께 연습하기 (미세농도 지수별 색 표현하기)

undefined주차

박*찬

・

추천

・

조회수

답변 완료

미세먼지 API를 오늘 해당되는 자료로 기록했습니다.

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

질문 01.

오늘 미세먼지 지수가 너무 좋아서 안좋은 상황을 가정한 강의와 다르게 70아래는 녹색으로 하여 표현하였습니다.

여기서 추가적으로 시행해 보고 싶은 것이 있었습니다.

사진에는 없지만 영등포구의 경우 미세먼지 지수가 100이기에 색 구분을 3단계로 하여

100 이상 : 빨간색

100 미만 70 이상 : 검정색

70 미만 : 녹색으로 표현하고 싶었습니다.

구글링을 해보니 자바스크립트에서는 조건물을 여러개 붙일 때,

else if

else 로 구분하는 것 같았습니다.

.clean{
    color: green;

.bad{
    color: red;

반복문 안에 이렇게 기록해 보았습니다. 그런데.. 영등포구 100 지수는 변동이 없어서.. 3개 이상의 색 구분을 위해서는 어떻게 해야 하는지 질문드려 봅니다.

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

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- jQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }

        .clean{
            color: green;

        .bad{
            color: red;
        }

    </style>

    <script>
        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 (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 > 100) {
                            temp_html = `<li class="bad"> ${gu_name} : ${gu_mise} </li>`
                        } else if(gu_mise < 70) {
                            temp_html = `<li class="clean"> ${gu_name} : ${gu_mise} </li>`
                        } else {
                            temp_html = `<li> ${gu_name} : ${gu_mise} </li>`
                        }

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

                }
            })
        }
    </script>

질문 02.

웹페이지를 보면 실시간 미세먼지 상태라고 되어 있지만, 실시간에 해당되는 정보를 확인할 수 없어서 웹페이지에 이를 넣은 표현을 하고 싶었습니다.

[업데이트] 버튼 클릭시

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99
json 문서를 보면 > RealtimecityAir > row > MSRDT 를 보면 202209132000 아마도 22년 09월 13일 20시 정보인 것 같은데
위의 사진과 같이
여기에 [22년 09월 13일] 이라고 표시가 가능할까요?
중구 : 85
종로구 : 71
용산구 : 81

let today = response['RealtimeCityAir']['row']['MSRDT'][0]

댓글 알림