如何使用jQuery Ajax的each方法将两组数组数据按指定结构追加到表格

核心思路 #

你的$data1和$data2是按索引一一配对的，同一索引下的两个元素分别对应同一组的产品信息、组件信息，遍历data1时直接通过当前循环的索引，同步取出data2对应位置的数据即可完成联动渲染。

注意事项 #

• 确保后端返回的data1和data2长度完全一致，两组数据按顺序一一对应
• 先修复原HTML的小错误：table标签id属性缺失闭合引号，改为 <table id="mytable">

修改后的完整代码 #

$.ajax({
  type: "POST",
  dataType: "json", // 显式指定返回数据类型，避免解析异常
  success: function (response) {
    var table = $("table#mytable > tbody.mytable");
    // 先清空原有内容，避免重复追加
    table.empty();
    $.each(response.data1, function (i, productItem) {
      // 取对应位置的组件数据，加容错逻辑避免数组长度不一致时报错
      var componentItem = response.data2[i] || {};
      table.append(`
        <tr>
          <td>${productItem.product_sku}</td>
          <td>${productItem.product_name}</td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <td></td>
          <td></td>
          <td>${componentItem.component_name || ''}</td>
          <td>${componentItem.part_id || ''}</td>
        </tr>
      `);
    });
  }
});

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