如何实现定时将JSON数据渲染到HTML表格并修复代码不展示问题

原代码核心问题 #

• POST请求提交的JSON数据没有序列化，processData: false搭配content-type: application/json时需要手动将请求体转为JSON字符串
• 遍历对象错误：不应直接遍历整个response对象，接口返回的运单数据在response.data.items数组中
• 未做字段空值兼容：嵌套字段如果某一层为空会直接报错，导致表格渲染失败
• 字段名使用错误：需求要求返回tracking_id，原代码用了tracking_number

优化后代码 #

JS代码 #

const settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://order-tracking.p.rapidapi.com/trackings/realtime",
  "method": "POST",
  "headers": {
    "content-type": "application/json",
    "x-rapidapi-host": "order-tracking.p.rapidapi.com",
    "x-rapidapi-key": "c1b4466148msh84c499d6e5590c4p155c1bjsne8487b7633cc"
  },
  // 序列化请求数据适配接口要求
  "data": JSON.stringify({
    "tracking_number": "CM436202938IN",
    "carrier_code": "india-post"
  })
};

// 页面加载先请求一次，不用等第一次定时器触发
getTrackInfo();
// 定时更新数据
setInterval(getTrackInfo, 50000);

function getTrackInfo() {
  $.ajax(settings)
  .done(function (response) {
    let sdata = '';
    $('#trackinfo').empty();
    // 正确读取运单数组
    const items = response?.data?.items || [];
    items.forEach(item => {
      // 可选链避免空值报错
      const trackPoint = item?.origin_info?.trackinfo?.z9?.z1 || {};
      sdata += '<tr>';
      sdata += `<td>${item.tracking_id || '-'}</td>`;
      sdata += `<td>${trackPoint.date || '-'}</td>`;
      sdata += `<td>${trackPoint.Details || '-'}</td>`;
      sdata += `<td>${trackPoint.checkpoint_status || '-'}</td>`;
      sdata += '</tr>';
    });
    $('#trackinfo').html(sdata);
  })
  // 新增错误捕获，方便排查问题
  .fail(function(err) {
    console.error('接口请求失败：', err);
    $('#trackinfo').html('<tr><td colspan="4">数据加载失败，请稍后重试</td></tr>');
  });
}

HTML代码（可直接复用原逻辑） #

<table>
  <thead>
    <tr>
      <th>Tracking ID</th>
      <th>Update Date</th>
      <th>Current City</th>
      <th>Current Status</th>
    </tr>
  </thead>
  <tbody id="trackinfo"></tbody>
</table>

改动说明 #

• 新增请求数据序列化逻辑，适配接口要求的JSON格式请求体
• 调整遍历逻辑，直接读取运单列表数组进行渲染
• 新增可选链和空值兜底逻辑，避免字段缺失导致的JS报错
• 新增错误捕获逻辑，接口异常时会给出提示，方便排查
• 页面加载完成后立即请求一次数据，不需要等待第一个50秒的定时器周期

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