如何通过jQuery AJAX遍历JSON并构建HTML表格

没问题，我来帮你搞定这个需求！咱们一步步来修改你的jQuery代码，确保能正确把预约数据渲染到表格里。

先明确前提 #

首先假设你的Entities.UserAppointments实体包含这些核心字段（你可以替换成自己实际的字段名）：

• AppointmentId（预约ID）
• UserName（用户名）
• AppointmentDateTime（预约时间）
• ServiceName（服务类型）
• Status（预约状态）

另外，你的HTML表格结构应该类似这样（确保有<tbody>，咱们把数据行追加到这里，避免影响表头）：

<table id="tblAppointments">
  <thead>
    <tr>
      <th>预约ID</th>
      <th>用户</th>
      <th>预约时间</th>
      <th>服务类型</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <!-- 这里会追加数据行 -->
  </tbody>
</table>

修改后的jQuery AJAX代码 #

下面是完整的修改版代码，重点看success回调里的逻辑：

// 基础AJAX请求，修改success部分即可
$.ajax({
  url: "/api/your-appointment-endpoint", // 替换成你的API地址
  type: "GET",
  dataType: "json",
  success: function(appointments) {
    // 先清空tbody（可选，避免重复加载数据时出现重复行）
    $("#tblAppointments tbody").empty();
    
    // 遍历返回的IEnumerable<UserAppointments>数组
    $.each(appointments, function(index, appointment) {
      // 构建表格行的HTML，注意字段名要和返回的JSON字段匹配！
      // 注意：C#实体的PascalCase字段，默认JSON序列化后会变成camelCase（比如AppointmentId → appointmentId）
      var row = `
        <tr>
          <td>${appointment.appointmentId}</td>
          <td>${appointment.userName}</td>
          <td>${new Date(appointment.appointmentDateTime).toLocaleString()}</td>
          <td>${appointment.serviceName}</td>
          <td>${appointment.status}</td>
        </tr>
      `;
      
      // 把行追加到表格的tbody里
      $("#tblAppointments tbody").append(row);
    });
  },
  error: function(xhr, status, error) {
    // 处理请求失败的情况，比如提示用户
    console.error("加载预约数据失败:", error);
    alert("无法获取预约信息，请稍后重试");
  }
});

关键细节说明 #

1. 字段名匹配：如果你的API返回的JSON字段是驼峰式（比如appointmentId而不是AppointmentId），一定要确保代码里的字段名和JSON一致——这是最容易踩坑的地方！如果你的API返回的是 PascalCase 字段，那直接用appointment.AppointmentId即可。
2. 日期格式化：如果返回的是ISO格式的时间字符串，用new Date().toLocaleString()可以转换成用户友好的本地时间格式，你也可以根据需求换成其他格式化方式（比如用moment.js，但原生方法足够应对简单场景）。
3. 清空表格：empty()方法是可选的，如果你的页面会多次触发这个请求，清空可以避免重复数据；如果是首次加载，也可以去掉这行。
4. 错误处理：加上error回调很重要，能在API请求失败时给用户反馈，也方便调试。

替代写法（原生JS遍历） #

如果你不想用jQuery的$.each，也可以用原生的forEach：

appointments.forEach(function(appointment) {
  // 同样的行构建逻辑
  var row = `...`;
  $("#tblAppointments tbody").append(row);
});

这样就能完美把API返回的预约数据渲染到表格里啦！

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