JavaScript实现Storm Reports全量数据循环渲染的技术问询

修改后的完整脚本 #

window.onload = () => {
    const target = document.getElementById('stormreport2');
    const aeris = new AerisWeather('[CLIENT_ID]', '[CLIENT_SECRET]');
    const request = aeris.api().endpoint('stormreports').action('search').from('-120hour').query('state:sd').limit(20); // 可按需调整返回数量上限

    request.get().then((result) => {
        const reports = result.data;
        if (!reports || reports.length === 0) {
            target.innerHTML = '<div class="alertmessage">暂无风暴报告数据</div>';
            return;
        }

        // 遍历所有报告生成对应HTML片段
        const reportsHtml = reports.map(item => {
            const report = item.report;
            const place = item.place;
            const formattedTime = aeris.utils.dates.format(new Date(report.timestamp * 1000), 'MM/dd/yyyy h:mm a');
            const codeSuffix = report.code === 'H' ? `"` : report.code === 'G' ? 'MPH' : '';
            
            return `
                ${formattedTime}<br>
                ${report.type} ${report.detail.text || ''}${codeSuffix}<br>
                Location: ${report.name} (${place.county} County)<br>
                ${report.comments || ''}<br><br>
            `;
        }).join('');

        target.innerHTML = `<div class="alertmessage">${reportsHtml}</div>`;
    }).catch(error => {
        console.error('获取风暴报告失败:', error);
        target.innerHTML = '<div class="alertmessage">加载风暴报告失败，请稍后重试</div>';
    });
};

关键改动说明 #

• 遍历所有数据：用数组map()方法替代原脚本硬编码的索引访问，不管返回1条、2条还是20条数据，都能完整展示所有结果。
• 空数据处理：增加数组为空的判断逻辑，无数据时显示提示文本，避免页面空白。
• 代码精简：将重复调用的字段提取为变量，统一处理code对应的后缀文本，减少冗余代码。
• 错误捕获：添加catch()处理API请求失败场景，提升页面容错性。
• 灵活调整数量：将limit(2)改为limit(20)，可根据需求修改返回数据的最大条数。

原问题核心原因 #

原脚本直接通过固定索引访问数组元素，当返回数据不足2条时，访问report[1]会触发未定义错误，且无法处理超过2条的结果。通过遍历数组的方式，能彻底适配任意数量的返回数据。

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