openweathermap weather.icon是顯示爲未定義

Question

這是我的網頁看起來像：http://prntscr.com/dg6dmm和我codepen鏈接：http://codepen.io/johnthorlby/pen/dOmaEr

我想了解從API調用weather.icon和使用圖標標識（在此示例中爲「02n」），並根據天氣情況顯示https://openweathermap.org/weather-conditions的圖標，但這只是顯示爲未定義的，但如果您在整個調用中查看屏幕截圖，則圖標爲「02n」。

這裏是我的html：

<div class="main" id="temp"> 
    <h1>Weather!</h1> 
    <h2></h2> 
    <h3></h3> 
    <p></p> 
    <img src=""> 
</div> 

這裏是我的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; 
} 

這裏是我的JS：

$(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); 
    //update h2 with city, country and temperature and testing to see what weather.icon is but comes back as undefined 
    $("#temp h2").text("The temperature in " + name + " is " + temp + "°C " + icon); 
    //testing to see if there is a icon in the api call which there is "02n" 
    $("#temp p").text(wData); 
    //display image of weather type from https://openweathermap.org/weather-conditions 
    $("#temp img").attr("src", "http://openweathermap.org/img/w/" + icon + ".png"); 
    }); 
}); 

Answer 1

天氣是在JSON數組，你需要將數據從其中正確拉出。此外，你的輸出字符串有「」，所以我們需要刪除它們。

var icon = JSON.stringify(json.weather[0].icon); 
icon = icon.replace("\"",""); 
icon = icon.replace("\"","");