Question

我想在页面中包含一个简单的脚本，该脚本从api端点检索天气并将其添加到页面中。我得到的错误是。

app.js:10 Uncaught TypeError: Cannot read property 'periods' of undefined
    at displayWeather (app.js:10)
    at app.js:13
displayWeather @ app.js:10
(anonymous) @ app.js:13

页面加载后，我可以在控制台中运行displayWeather（）函数，然后将结果添加到DOM。

我尝试将所有代码移到一个函数中，结果相同。

const address = 'https://api.weather.gov/gridpoints/LMK/49,64/forecast';
let weather = $.getJSON(address, function(data) {
    weather = data;
});


function displayWeather(){
    $(".weather").html("Current Temperature: " + 
           weather.properties.periods[0].temperature + " F");
    $(".weather").append("</br>" + 
           weather.properties.periods[0].detailedForecast);
};

displayWeather();

这应该在页面加载时将信息添加到dom，但是会给出未定义的错误。页面加载后，我可以在控制台中运行displayWeather函数，它可以正常运行。

Answer 1

由于天气是来自不受信任的来源，因此请检查每个属性，如下所示：

let temperature = weather && weather.properties && weather.properties.periods && weather.properties.periods.length && weather.properties.periods[0].temperature;

if (temperature) {
  $(".weather").html(`Current Temperature: ${ temperature } F`);
}

Answer 2

首先，控制台的结果类似

console.log(weather);

并检查其是否显示所有对象，然后检查键“句号”。如果period值不为null，则它将在html中显示当前温度。

尝试加载页面时，我一直收到此错误。 app.js：10未捕获的TypeError：无法读取未定义的属性“句号”

2 个答案: