XHR获取接口数据后控制台可见数组但HTML表格无法加载渲染

表格无法渲染和tobodyHtml变量定义无关，核心是代码里存在低级拼写错误：

• 遍历用户数组时，你将数组长度属性length错写为lenght（少写了字母t）
• 这个拼写错误会导致for循环终止条件判断触发JS异常，循环体完全不会执行，tobodyHtml始终保持初始的空字符串，最终赋值给tbody的内容为空，自然看不到渲染结果。

只需要修改for循环的判断条件，把错误拼写的lenght改为正确的length即可，修复后的完整JS代码如下：

document.addEventListener("DOMContentLoaded", function(event) {
function loadUsers(){
var userTbody=document.getElementById('user-tbody');
var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200){
         var userJSON=this.responseText;
         var usersArray=JSON.parse(userJSON);
         console.log(usersArray);
         var tobodyHtml="";
         // 修正length拼写错误
         for(let index = 0; index < usersArray.length; index++) {
             const user = usersArray[index];
             tobodyHtml+="<tr><td>"+user.id+"</td><td>"+user.username+"</td><td>"+user.password+"</td><td>"+user.birthdate+"</td></tr>";
         }
         userTbody.innerHTML=tobodyHtml;
        }
    };
    xhttp.open("GET", "http://localhost:8279/users", true);
    xhttp.send();

}
loadUsers();
});

• 遇到这类逻辑不生效的问题，优先打开浏览器控制台的错误面板查看报错，这类拼写错误会直接抛出明确的类型错误，顺着报错行号定位1分钟就能找到问题，不需要花两天时间盲查
• 你的tobodyHtml变量定义和拼接逻辑本身没有问题，不需要调整这部分逻辑。

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