API Weather App 的值 - 未捕获的类型错误

Question

我觉得这是一个愚蠢的问题，但我正在尝试了解更多关于将 APIs 与 Javascript 一起使用的信息。我正在为 API.

使用 Open Weather 应用程序

我的项目的一部分将允许用户在表格中输入一个城市，然后 API 获取当前 weather/current 温度等。这部分工作完全正常。

我正在尝试制作一个页面，允许用户在表格中输入一个城市，然后显示接下来几天的天气预报。

无法识别 API 中的值。我相信我在网站上使用的是正确的文档，这里是：https://openweathermap.org/forecast16

我正在使用 fetch 并被调用，但值为 'undefined' 我收到 Uncaught TypeError: Cannot read 属性 'temp' of undefined.

这是 url 和部分 js 代码：

const api = `https://api.openweathermap.org/data/2.5/forecast/daily? 
q=${input}&cnt=2&lang=en&appid=${myKey}&units=metric`;


  populateUI(data) {

    this.uiContainer.innerHTML = `
    
    <div class="card mx-auto mt-5" style="width: 18rem;">
    <div class="card-body justify-content-center">
    <h5 class="card-title">${data.name}</h5>
    <p class="card-subtitle mb-2 text-muted">Highs of ${data.list.temp.min}. Lows of 
    ${data.list.temp.max}</p>
    <p class="card-text ">Weather conditions are described as: 
    ${data.list.weather.description}</p>
    <p class="card-text ">Feels like: ${data.list.feels_like}</p>

    <p class="card-text ">Wind speed: ${data.list.humidity} m/s</p>          
    </div>
</div>
`;
 }

如果我为所有这些输入 ${data.list}，我会得到 401（未授权）所以我不确定我的 url 是否错误，但它看起来不错，因为文档？我是否需要为预测生成第二个 API 键，因为我已经有一个用于网站当前天气部分的 API 键？

Answer 1

根据文档中的示例 JSON 结构，list 是一个数组对象，每个对象都包含 [=12] 等属性=]. （参见 https://openweathermap.org/forecast16#JSON）

要在您的代码中访问此类属性，您应该遍历 data.list 中的项目并从每个项目中获取属性。例如：

let stringAsHTML = ``;

data.list.forEach(obj => stringAsHTML += `<p>Highs of ${obj.temp.min}</p>`);

API Weather App 的值 - 未捕获的类型错误

API Values for Weather App - Uncaught Type Error

javascript

html

jquery

api-design