커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
웹개발이 처음이어도 쉽게 배우는 GPT 웹개발
챕터 2
북마크
박*준
댓글
3
추천
0
조회수
6
조회수
6
답변 완료

콘솔창에 계속 오류가 뜹니다.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미세먼지 API로Fetch 연습하고 가기!</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

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

<body>
    <h1>Fetch 연습하자!</h1>

    <hr />

    <div class="question-box">
        <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
        <p>모든 구의 미세먼지를 표기해주세요</p>
        <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
        <button onclick="q1()">업데이트</button>
        <ul id="names-q1">
            <li>중구 : 82</li>
            <li>종로구 : 87</li>
            <li>용산구 : 84</li>
            <li>은평구 : 82</li>
        </ul>
    </div>
    <script>
        function q1() {
            // fetch -> 화면에 추가
            fetch("https://13.209.69.177.nip.io/sparta_api/seoulair")
                .then(res => res.json())
                .then(data => {
                    let rows = data['RealtimeCityAir']['row']
                    
                    rows.forEach(element => {
                        let gu_name = element['MSRSTE_NM']
                        let gu_mise = element['IDEX_MVL']

                        console.log(gu_name, gu_mise)
                    });
                })
        }
    </script>
</body>

</html>

취소
 공유
취소
댓글 0
댓글 알림
나의얼굴