Velo by Wix：如何在Repeater中展示逐小时气温数据

我尝试通过SMHI的开放API获取斯德哥尔摩的逐小时气温数据，API返回的"t"对象代表气温，但无法在Repeater组件中展示数据。

核心问题 #

1. 后端数据返回错误：当前后端只返回了单个小时的温度值，而非完整的逐小时时间序列数组，导致Repeater没有足够的数据渲染多个项。
2. 前端逻辑错误：
   • Repeater的data被赋值为单个温度值，而非数组，无法触发多item渲染。
   • 依赖parameters的固定下标获取温度，下标会随数据结构变化，可靠性差。
   • 错误地从itemData.timeSeries[index]取值，实际上itemData就是timeSeries数组中的单个元素。

修正后的后端代码 #

返回完整的timeSeries数组，为前端提供可循环的数据源：

import { getJSON } from 'wix-fetch';

export async function getWeather() {
    try {
        const response = await getJSON('https://opendata-download-metfcst.smhi.se/api/category/pmp3g/version/2/geotype/point/lon/16/lat/58/data.json');
        // 返回完整的逐小时时间序列数据
        return response.timeSeries;
    } catch (e) {
        console.error('获取天气数据失败:', e);
        return [];
    }
}

修正后的前端代码 #

正确设置Repeater数据源，并通过参数name字段（而非下标）可靠获取气温值：

import { getWeather } from 'backend/getSMHI.jsw'

$w.onReady(async function () {
    const weatherInfo = await getWeather();
    // 校验数据格式，确保是有效数组
    if (Array.isArray(weatherInfo) && weatherInfo.length > 0) {
        $w('#weatherRepeater').data = weatherInfo;
        
        $w('#weatherRepeater').onItemReady(($item, itemData) => {
            // 通过name="t"匹配气温参数，彻底避免下标变化问题
            const tempParam = itemData.parameters.find(param => param.name === 't');
            if (tempParam) {
                $item('#tempText').text = `${tempParam.values[0]}°C`;
            } else {
                $item('#tempText').text = '暂无数据';
            }
        });
    } else {
        console.error('天气数据为空或格式错误');
    }
})

关键改进点 #

• 后端返回完整的时间序列数组，为Repeater提供多item渲染的基础。
• 前端通过parameters.find()匹配参数名，替代固定下标，代码更健壮。
• 简化onItemReady逻辑，直接从当前item数据中取值，避免索引错误。
• 添加数据校验和错误处理，提升代码稳定性。

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