Take a look at what my webpage looks like: http://prntscr.com/dg6dmm and also check out my codepen link:
http://codepen.io/johnthorlby/pen/dOmaErI am trying to extract the weather icon from the api call and display that icon (e.g. "02n") on the page based on the current weather condition. However, the icon is showing as undefined even though it is clearly present in the API response (as shown in the screenshot).
Below is the HTML code snippet:
<div class="main" id="temp">
<h1>Weather!</h1>
<h2></h2>
<h3></h3>
<p></p>
<img src="">
</div>
And here is the corresponding CSS:
html, body {
margin: 0;
padding: 0;
font-family: 'Dosis', sans-serif;
background-color: #BEBDCE;
}
.main{
text-align: center;
background-color: #8E9EBC;
padding: 10px;
}
.main h1 {
margin: 0;
}
Lastly, this is the JavaScript being used:
$(document).ready(function() {
var api = "43881a1bf31fb1b7225348b3f7839a9d";
var city = "Oslo";
var wData;
$.getJSON("http://api.openweathermap.org/data/2.5/weather?q=" + city + "&units=metric&appid=" + api, function(json) {
wData = JSON.stringify(json);
var name = JSON.stringify(json.name + ", " + json.sys.country);
var temp = JSON.stringify(json.main.temp);
var icon = JSON.stringify(json.weather.icon);
temp = Math.round(temp);
$("#temp h2").text("The temperature in " + name + " is " + temp + "°C " + icon);
$("#temp p").text(wData);
$("#temp img").attr("src", "http://openweathermap.org/img/w/" + icon + ".png");
});
});