[fetch] 서버 - 데이터 받기(서울시 미세먼지 데이터)

Javascript

[fetch] 서버 - 데이터 받기(서울시 미세먼지 데이터)

WEB_CREASTORY 2023. 12. 2. 13:01

✅ fetch 사용하는 방법

1. fetch 기본 골격 작성

2. 호출할 정보를 가져올 파일경로(또는 URL경로) 작성

3. 호출 성공하면 불러올 정보 조건 작성

🔥 미세면지 수치가 60 보다 큰 곳들만 가져오기

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>띵동코딩 - fetch 연습</title>
    <style>
        .client {
            margin: 10px 10px;
        }
    </style>
    <script>
        function mise(){
            $('#city').empty();

            let url = 'http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99'
            fetch(url).then(res => res.json()).then((data) => {
                let rows = data['RealtimeCityAir']['row']
                for (let i = 0; i < rows.length; i++) {
                    let gu = rows[i]['MSRSTE_NM']
                    let value = rows[i]['IDEX_MVL']
                    let idex = rows[i]['IDEX_NM']

                    let temp_html = `<li>${gu} : ${value}(${idex})</li>`
                    if (value > 60) {
                        $('#city').append(temp_html);
                    }
                }
            });
        }
    </script>
</head>

<body>
    <div>
        <button onclick="mise()">미세먼지 정보</button>
        <div class="client">지역별</div>
        <ul id="city">

        </ul>
    </div>

</body>

</html>

저작자표시