使用JavaScript Fetch从Flask取数据时Bootstrap5表格无数据问题

可能的原因： #

• 表格结构不规范：Bootstrap 5的表格需要包含<tbody>元素，你当前的表格只有<thead>，没有<tbody>，新增的数据行直接挂载到<table>下，浏览器无法正确识别为数据行，因此显示空表格提示。
• Fetch请求未处理错误：代码没有捕获请求失败的场景（比如后端接口404、500错误，跨域问题），如果请求失败，数据无法返回，表格自然无内容。
• 后端接口返回异常：Flask的/employees接口可能未返回合法的JSON数组，比如返回单个对象、非数组格式，或者字段名不匹配（比如用Id而非id），导致forEach无法遍历数据。

修复后的代码： #

HTML部分（补全tbody）：

<table id="dataTable" class="table table-bordered">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody id="tableBody"></tbody>
</table>

JavaScript部分（完善错误处理与数据校验）：

const tableBody = document.getElementById('tableBody');
fetch('employees')
  .then(response => {
    // 校验HTTP响应状态
    if (!response.ok) {
      throw new Error(`请求错误: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    // 确保返回的是数组格式
    if (!Array.isArray(data)) {
      console.error('后端返回数据不是数组');
      tableBody.innerHTML = '<tr><td colspan="2">数据格式错误</td></tr>';
      return;
    }
    // 遍历渲染数据行
    data.forEach(employee => {
      const row = document.createElement('tr');
      row.innerHTML = `
        <td>${employee.id ?? '无'}</td>
        <td>${employee.name ?? '无'}</td>
      `;
      tableBody.appendChild(row);
    });
    // 如果数组为空，自定义提示
    if (data.length === 0) {
      tableBody.innerHTML = '<tr><td colspan="2">暂无员工数据</td></tr>';
    }
  })
  .catch(error => {
    console.error('数据获取失败:', error);
    tableBody.innerHTML = '<tr><td colspan="2">数据加载失败，请稍后重试</td></tr>';
  });

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