how to display openweathermap weather icon

Question

I am using openweathermap to display weather reports. Everything is working fine but there is a problem with the icon . The json response code are :

Array
(
    [city] => Array
        (
            [id] => 1271476
            [name] => Guwahati
            [coord] => Array
                (
                    [lon] => 91.751
                    [lat] => 26.1862
                )

            [country] => IN
            [population] => 899094
        )

    [cod] => 200
    [message] => 0.0630711
    [cnt] => 1
    [list] => Array
        (
            [0] => Array
                (
                    [dt] => 1495688400
                    [temp] => Array
                        (
                            [day] => 33
                            [min] => 24.89
                            [max] => 33.82
                            [night] => 24.89
                            [eve] => 30.6
                            [morn] => 33
                        )

                    [pressure] => 1013.02
                    [humidity] => 90
                    [weather] => Array
                        (
                            [0] => Array
                                (
                                    [id] => 500
                                    [main] => Rain
                                    [description] => light rain
                                    [icon] => 10d
                                )

                        )

                    [speed] => 3.92
                    [deg] => 88
                    [clouds] => 24
                    [rain] => 2.73
                )

        )

)

Now how can I display the icon : [weather] [0] [icon] => 10d

what is 10d & how can I got the url of the icon.

Answer 1

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

Answer 2

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 variables 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. :)

Answer 3

Thank you all very much! I am a very beginning Flutter programmer and wanted to display the Icon in the Weatherapp, we made on course with Angela Yu.

I did this in Flutter:

String weerImageString;
weerImageString = weatherData['weather'][0]['icon'];

and then were I wanted it to display, I did:

Image.network('http://openweathermap.org/img/w/$weerImageString.png',),

I hope that I can someday helping someone with this. And... if there is an easier way, I would love to hear!