I am currently able to grab the correct icon code from the open weather JSON api, but when I try and display it through console.log or with $("#iconDisplayer").html(icon); , neither works. What am I doing incorrectly? What is the best way to display the weather icon?
Thanks!
I ended up not using icons from the api since I wanted my own custom graphics, but if you want to use icons from the api, you’ll need to find the url that points to the specific icon you want. Openweathermap.org has info about the icon urls. Along with the url where the icons live, you’ll need to specify the specific icon you want by accessing data you get from your AJAX request. And don’t forget to include the image format of the icons (I think they’re .png). If you can assign all this info to a variable (named ‘icon’ or whatever you want to name it), then you can plug in that variable name when you use JavaScript or jQuery to insert html into your page. (Like JacksonBates described, but it’s also good to close that img tag with />)
Thanks for the tip, I started working on it but I can’t seems to make it work.
$("#showIcon").html(’<i class=’+‘wi-owm-’ + data.weather[0].id +’>’);
Are my quotes in the right places?
Is my jQuery selector .html wrong? I’ve tried different combinations.
Do you have an example elsewhere? The Weather Icons webite doesn’t seems to have a lot of info.
I’m actually trying to concatenate the “better styled” weather icons from this website https://erikflowers.github.io/weather-icons/.
This site already provide mappings for Open Weather Api https://erikflowers.github.io/weather-icons/api-list.html
The documentation suggests to use so I followed but I really need any suggestions that’ll make it work all together.