API获取Task及Work Details子表数据后，HTML表格子表内容不显示问题

问题 #

我正在编写网页脚本，通过AJAX调用API从「Task」文档类型及其子表「Work Details」获取数据。主表数据已成功显示在HTML表格中，但子表数据无法展示。

现有代码 #

$(document).ready(function() {
  // 从URL查询字符串中获取项目ID筛选值
  var projectId = getQueryParam("project_id");

  // 将projectId设置为<h2>元素的文本
  $("#project_id").text("Project Name: " + projectId);

  $.ajax({
    url: "https://example.com/api/resource/Task",
    type: "GET",
    dataType: "json",
    headers: {
      "Authorization": "token xxxxxxxxxxxxxxxxxxxxx"
    },
    data: {
      fields: JSON.stringify([
        "type",
        "project_name",
        "farmer",
        "survey_number",
        "total_in_cubic_mts",
        "total_fuel_expenses",
        "water_storage",
        "work_details.work_type",
        "work_details.start_date",
        "work_details.end_date"
      ]),
      filters: JSON.stringify([
        ["project_name", "=", projectId],
        ["type", "=", "work measurements"]
      ]),
      limit: 50
    },
success: function(response) {
  console.log(response); // 打印API响应以检查数据

  var tasks = response.data;

  // 遍历每个任务
  tasks.forEach(function(task) {
    console.log(task); // 打印每个任务以检查数据

    var mainTableRow = $("<tr>");
    mainTableRow.append($("<td>").text(task.farmer));
    mainTableRow.append($("<td>").text(task.survey_number));
    mainTableRow.append($("<td>").text(task.total_in_cubic_mts));
    mainTableRow.append($("<td>").text(task.total_fuel_expenses));
    mainTableRow.append($("<td>").text(task.water_storage));

    var workDetails = task.work_details;

    if (workDetails && workDetails.length > 0) {
      console.log(workDetails); // 打印工作详情以检查数据

      var childTableBody = $("<tbody>"); // 为子行创建单独的tbody

      workDetails.forEach(function(workDetail) {
        var childTableRow = $("<tr>");
        childTableRow.append($("<td>").text(workDetail.work_type));
        childTableRow.append($("<td>").text(workDetail.start_date));
        childTableRow.append($("<td>").text(workDetail.end_date));
        console.log(childTableRow); // 打印每个子表行以检查

        childTableBody.append(childTableRow); // 将子行追加到子tbody
      });

      mainTableRow.after(childTableBody); // 将子tbody追加到主行之后
    }

    $("#taskTable tbody").append(mainTableRow); // 将主行追加到主tbody
  });
},
    error: function(xhr) {
      console.log(xhr.responseText);
    }
  });
});

// 从URL获取查询参数值的函数
function getQueryParam(param) {
  var urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(param);
}

API返回数据示例 #

{ 
  "type": "कामाचे मोजमाप",
  "project_name": "Bodare", 
  "farmer": "Test Farmer", 
  "survey_number": "123/234", 
  "total_in_cubic_mts": 789, 
  "total_fuel_expenses": 34000, 
  "water_storage": 10010000, 
  "work_type": "नाला खोलीकरण", 
  "start_date": "2023-07-04", 
  "end_date": "2023-07-06"
}

我怀疑task.work_details不是获取子表数据的正确方式，或者子表追加逻辑有问题。

解决方案 #

1. 先确认API返回结构问题 #

从你提供的API返回示例能明确看到：子表字段（work_type、start_date、end_date）并没有嵌套在work_details对象/数组里，而是直接和主表字段平级返回。这意味着：

• 你请求时用的work_details.work_type写法并没有让API返回嵌套结构，而是直接返回了子表的单个字段值
• 如果一个Task对应多条Work Details，当前API可能只返回了第一条子表数据，或者API本身的字段映射规则需要调整

2. 针对当前返回结构修改代码 #

如果API就是平级返回子表字段，那不需要去读取task.work_details，直接取平级字段即可：

// 遍历每个任务
tasks.forEach(function(task) {
  console.log(task);

  var mainTableRow = $("<tr>");
  mainTableRow.append($("<td>").text(task.farmer));
  mainTableRow.append($("<td>").text(task.survey_number));
  mainTableRow.append($("<td>").text(task.total_in_cubic_mts));
  mainTableRow.append($("<td>").text(task.total_fuel_expenses));
  mainTableRow.append($("<td>").text(task.water_storage));

  // 直接读取平级的子表字段，用colspan保证行列对齐
  var childTableRow = $("<tr>");
  childTableRow.append($("<td colspan='2'>").text(task.work_type));
  childTableRow.append($("<td>").text(task.start_date));
  childTableRow.append($("<td>").text(task.end_date));
  childTableRow.append($("<td>").text("")); // 空列补位

  // 先追加主行，再追加子行
  $("#taskTable tbody").append(mainTableRow);
  $("#taskTable tbody").append(childTableRow);
});

3. 若需获取多条子表数据 #

如果一个Task对应多条Work Details，需要调整API请求参数，确保返回嵌套的work_details数组：

• 查阅API文档，确认获取子表的正确方式，比如是否需要添加expand参数关联子表
• 尝试将fields中的子表字段改为work_details（不带后续属性），看是否返回完整的子表数组

4. 修复子表追加逻辑问题 #

原代码中mainTableRow.after(childTableBody)的写法无效：因为mainTableRow还未被追加到DOM中，调用.after()不会生效。正确做法是：

var tableBody = $("#taskTable tbody");
tasks.forEach(function(task) {
  var mainTableRow = $("<tr>");
  // 主行内容填充...

  // 先把主行追加到表格
  tableBody.append(mainTableRow);

  // 若存在嵌套的子表数组
  if (task.work_details && task.work_details.length > 0) {
    task.work_details.forEach(function(workDetail) {
      var childTableRow = $("<tr>");
      // 子行内容填充...
      tableBody.append(childTableRow);
    });
  }
});

内容的提问来源于stack exchange，提问作者learnig-harsh