[Web] 과제) 서울 날씨 API 적용시키기 - ( week 2 )

이전에 만든 html을 베이스로 서울 날씨 API를 불러와서 데이터를 브라우저에 나타내본다.

 

서울 날씨 API

 

준비

API를 열어서 데이터를 살펴본다.

여기서 temp 데이터를 가져다 쓰면 될 것 같다.

 

날씨 정보 같은 경우 클릭 이벤트가 발생할 때 html이 생성되는 게 아니라 브라우저가 열릴 때 자동으로 실행되어야 한다.

이 기능을 해주는 함수가 있다.

$(document).ready(function () {

 

        })

 

간단하게 temp 값을 가져다가 해당 태그에 값을 넣어주면 된다.

 

    <script>

        $(document).ready(function () {

            fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then(res => res.json()).then(data => {

                let temper = data['temp']

                $('#temp').empty();

                $('#temp').append(temper)

            })

        })

    </script>

값을 넣어주기 전에 기존에 있던 값을 지우고 API에서 가져온 값을 넣어준다.

실행해 보면 날씨가 잘 적용된 게 확인된다.