如何正确编写循环代码遍历天气API返回数据实现7天天气预报

你现有代码无法正常运行的核心原因是对接口返回的JSON结构判断错误：

• 该天气接口返回的parsedJson.dataseries是按时间排序的数组，每个数组元素对应一个时间节点的天气数据，cloudcover、风速等字段都存在每个数组元素内部
• 你代码中写的parsedJson.dataseries.cloudcover是不存在的路径，遍历逻辑自然无法拿到正确值

weatherApi("http://www.7timer.info/bin/api.pl?lon=31.049999&lat=-29.883333&product=astro&output=json&unit=metric");

async function weatherApi(apiUrl) {
    try {
        const response = await fetch(apiUrl);
        // 直接调用json方法解析响应，无需先取文本再手动转JSON
        const weatherResult = await response.json();
        let forecastContent = "";

        // 遍历dataseries前7项，对应7天预报
        for (let i = 0; i < 7; i++) {
            const dailyData = weatherResult.dataseries[i];
            forecastContent += `
<h2>day : ${i + 1}</h2>
<p>cloudcover : ${dailyData.cloudcover}</p>
<p>wind, speed: ${dailyData.wind10m.speed}</p>
`;
        }

        document.getElementById("demo").innerHTML = forecastContent;
    } catch (error) {
        console.error("天气数据拉取/解析失败：", error);
    }
}

• 修正遍历逻辑：直接遍历dataseries数组，从每个单日数据对象上取cloudcover字段值
• 风速数据存储在单日数据的wind10m.speed属性下，直接取值即可匹配你要的展示格式
• 增加异常捕获逻辑，请求出错、数据解析出错时可直接在控制台查看错误原因
• 简化JSON解析流程，使用fetch原生的json()方法替代手动解析文本的写法

内容的提问来源于stack exchange，提问作者Wendy