用数据库传json给html，无法显示

问题遇到的现象和发生背景

做一个读取数据库的html 和js，但是html里关于数据库是空白

问题相关代码，请勿粘贴截图

<!DOCTYPE html>
<html lang="en">
    <head>
      <title>Final Assigment</title>
        <script type="text/javascript"></script>
        <meta charset="UTF-8">
        <title>Final Assigment</title>
          <script defer src="final.js"></script>
        <link rel="stylesheet" href="final.css">
    </head>

    <body onload="getData()">
        <h1>Final Assigment Of Web</h1>
        <div id="Thirty_measurements"></div>
        <h2>30 Measurement from API</h2>

    </body>
</html>


```javascript

function dataToHtmlRepresentation(dataObjects){

    let html='<table><tr><th>Row Number</th><th>Measurement time</th><th>Measurement Type</th><th>Measured Value</th></tr>';
    const l = dataObjects.length;

    for (let i = 0; i < l; i++) {
        const dataObject = dataObjects[i];
            html +=`
             <tr>
             <td>${dataObject[i].id}</td>
             <td>${dataObject[i].device_id}</td>
             <td>${dataObject[i].date_time}</td>
             <td>${dataObject[i].data}</td>
             </tr>
             `
        }
        html += '</table>';
        return html;
    }
    
    const DATA_SOURCE = 'http://webapi19sa-1.course.tamk.cloud/v1/weather';
    
    // Making a get request using the Fetch API
    function getData() {
        fetch(DATA_SOURCE).then(response => {return response.json()})
                          .then(data => {
                            const e = document.getElementById("data-container");
                            e.innerHTML = dataToHtmlRepresentation(data);
                          })
                          .catch(error => console.error('AAARRRGH! ' + error));
    }

运行结果及报错内容

结果是完全不显示关于数据库的内容

我的解答思路和尝试过的方法

我的思路是html里body onload可能有问题，但是没能解决

我想要达到的结果

dataObject已经是项目元素了,之后就不要加[i]了
改成

        html +=`
         <tr>
         <td>${dataObject.id}</td>
         <td>${dataObject.device_id}</td>
         <td>${dataObject.date_time}</td>
         <td>${dataObject.data}</td>
         </tr>
         `

另外你页面上并没有id为data-container的元素,

const e = document.getElementById("data-container");
应该改成
const e = document.getElementById("Thirty_measurements");
吧

如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632