How To Display Openweathermap Weather Icon

I am using openweathermap to display weather reports. Everything is working fine but there is a problem with the icon. The JSON response code is: Array ( [city] => Array

Solution 1:

Well, I know an way using jQuery.

  <div id="icon"><img id="wicon" src="" alt="Weather icon"></div>

At the HTML above you see the unique thing missing is the src attribute, so let's fill it with some jQuery and JavaScript. You may create a variable to hold the icon code provided by the API like:

var iconcode = a.weather[0].icon;

After it you should concatenate this var iconcode with the url that contains the icons, like:

var iconurl = "http://openweathermap.org/img/w/" + iconcode + ".png";

Finally just change src attribute in the DOM by doing this:

        $('#wicon').attr('src', iconurl);

I hope this solve the issue. :)

Solution 2:

You can get OpenWeatherMap API icons through this link. All you need to do is that moderate the icon id given in bold below in this link. You can change 10d with any icon id that you need.

http://openweathermap.org/img/w/10d.png

For more information, You can read here OpenWeatherMap Icons

Solution 3:

So I spent a lot of time solving this problem. This answer is for pure HTML and JavaScript and if you don't want to use jquery.

1- Include the "icons" file in your program:openweatherAPI Icons integration

2- In your index.html :

<divclass="weather-icon"><imgsrc="icons/unknown.png" /></div>

3- In your JavScript file(follow these 3 steps in your JS code) :

1st Step: let locationIcon = document.querySelector('.weather-icon');

2nd Step: const {icon} = data.weather[0];

3rd Step(not in code format, as it was making thebackticks part disappear): locationIcon.innerHTML = <img src="icons/${icon}.png">;

Worked just fine for me. Happy building.

Solution 4:

the src of the icon would be like this:

http://openweathermap.org/img/wn/10d@2x.png

see Weather icons

Solution 5:

This code works for me in React Native:

const icon = wInfo.weather[0].icon; // For instance "09d"
<Image source={{ uri:``http://openweathermap.org/img/w/${icon}.png`` }} />