如何将JSON数据展示到HTML表格？解决PostgreSQL返回undefined问题

核心问题 #

• 你把html定义成了字符串，却试图访问它的Name/Age/Course属性，字符串不存在这些属性，所以必然返回undefined。
• 循环逻辑错误：把所有学生的信息拼接成了一段文本，没有按照表格的行结构生成内容。
• 使用for...in遍历数组不合适，它会遍历数组的所有可枚举属性（包括索引和原型链属性），更适合用数组专用的遍历方法。

修复后的JS代码 #

function ReadAllResult(json, status, req) {
    const tbody = $("#all-students tbody");
    // 清空加载提示
    tbody.empty();

    // 处理空数据情况
    if (!json || json.length === 0) {
        tbody.append('<tr><td colspan="3">暂无学生数据</td></tr>');
        return;
    }

    // 遍历每个学生，生成对应表格行
    json.forEach(student => {
        const row = `<tr>
            <td>${student.Name || ''}</td>
            <td>${student.Age || ''}</td>
            <td>${student.Course || ''}</td>
        </tr>`;
        tbody.append(row);
    });
}

额外说明 #

• 确保后端返回的json是学生对象组成的数组，结构示例：

  [
    { Name: "张三", Age: 20, Course: "计算机科学" },
    { Name: "李四", Age: 21, Course: "软件工程" }
  ]
  

• 代码中加入了空数据处理，避免表格显示异常；用|| ''处理字段为空的情况，防止页面显示undefined。

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