[JS] openweathermap api 날씨 아이콘 표시

https://openweathermap.org/ 의 api를 이용하여 날씨 아이콘을 표시하려고 한다.

일단 기본적인 지역과 날씨 정보는 가져왔는데 아이콘은 어떻게 가져오나 많이 알아봤다.

그래도 내가 원하는 답은 딱히 나오지 않았는데 아마도 너무 당연하고 쉬운 일이라 그렇지 않았나 싶다.

 

일단 아래처럼 openweather api 안에 있는 data.weather.icon 데이터를 가져와야 했다.

 

const iconData = data.weather[0].icon;

 

그리고 아래처럼 html에 준비해둔 img 태그에 .src로 url을 지정해주는데, 이때 미리 가져왔던 ${iconData}를 넣어준다.

 

const icon = document.querySelector("#weathericon img").src=`http://openweathermap.org/img/wn/${iconData}@2x.png`

 

이제 확인해보면 날씨 아이콘도 표시되어 있다.