Open-Meteo API数据填充HTML表格失败问题求助

我需要从Open-Meteo天气API返回的JSON数据中提取7天的时间（time）和最高气温（temperature_2m_max）数据，解析后填充到HTML表格中，但始终无法实现表格数据填充。

我的代码 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
    th{ 
        color:#fff;
            }
</style>


<table class="table table-striped">
    <tr  class="bg-info">
        <th>time</th>
        <th>temperature</th>
      
    </tr>

    <tbody id="myTable">

    </tbody>
</table>

<script>
    var myArray = [
    
    ]

    $.ajax({
        method: 'GET',
        url: 'https://api.open-meteo.com/v1/forecast?latitude=44.32&longitude=23.80&start_date=2022-11-30&end_date=2022-12-06&daily=temperature_2m_max&timezone=GMT',
        success:function(response){
            myArray = response.daily
            buildTable(myArray)
            console.log(myArray)
        }
    })

    function buildTable(data){
        var table = document.getElementById('myTable')
        
        for (var i = 0; i < data.length; i++){
            var row = `<tr>
                            <td>${data[i].time}</td>
                            <td>${data[i].temperature_2m_max}</td>
                            
                       </tr>`
            table.innerHTML += row
            
        }
    }

</script>

API返回的JSON数据 #

Raw格式 #

{"latitude":44.3125,"longitude":23.8125,"generationtime_ms":0.3180503845214844,"utc_offset_seconds":0,"timezone":"GMT","timezone_abbreviation":"GMT","elevation":106.0,"daily_units":{"time":"iso8601","temperature_2m_max":"°C"},"daily":{"time":["2022-11-30","2022-12-01","2022-12-02","2022-12-03","2022-12-04","2022-12-05","2022-12-06"],"temperature_2m_max":[5.9,6.1,8.1,9.5,9.3,7.3,4.3]}}

解析后格式 #

{
"latitude": 44.3125,
"longitude": 23.8125,
"generationtime_ms": 0.3180503845214844,
"utc_offset_seconds": 0,
"timezone": "GMT",
"timezone_abbreviation": "GMT",
"elevation": 106,
"daily_units": {},
"daily": {
"time": [
"2022-11-30",
"2022-12-01",
"2022-12-02",
"2022-12-03",
"2022-12-04",
"2022-12-05",
"2022-12-06"
],
"temperature_2m_max": [
5.9,
6.1,
8.1,
9.5,
9.3,
7.3,
4.3
]
}
}

解决方案 #

问题核心是对API返回数据结构的理解偏差：response.daily不是对象数组，而是包含两个平行数组的对象——time数组存储日期，temperature_2m_max数组存储对应日期的最高气温。原代码遍历data.length时，因对象无length属性导致循环无法执行。

修改buildTable函数，改为遍历time数组的长度，通过索引对应两个数组的元素：

function buildTable(data){
    var table = document.getElementById('myTable')
    // 遍历time数组长度，两个数组长度一致
    for (var i = 0; i < data.time.length; i++){
        var row = `<tr>
                        <td>${data.time[i]}</td>
                        <td>${data.temperature_2m_max[i]} °C</td>
                   </tr>`
        table.innerHTML += row
    }
}

修改后即可正确将每日日期和对应最高气温填充到表格中。

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