利用API数据在HTML表格中展示

我正在为一个网页编写脚本，该脚本通过API调用从“Task”文档类型及其子表“Work Details”中获取数据。虽然数据已经正确获取，但只有来自Task文档类型的数据被添加到html表中。以下是代码：

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

  // 将projectId设置为元素的文本
  $("#project_id").text("项目名称：" + 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 = $("");
    mainTableRow.append($("").text(task.farmer));
    mainTableRow.append($("").text(task.survey_number));
    mainTableRow.append($("").text(task.total_in_cubic_mts));
    mainTableRow.append($("").text(task.total_fuel_expenses));
    mainTableRow.append($("").text(task.water_storage));

    var workDetails = task.work_details;

    if (workDetails && workDetails.length > 0) {
      console.log(workDetails); // 将工作详细信息记录到控制台以检查数据

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

      workDetails.forEach(function(workDetail) {
        var childTableRow = $("");
        childTableRow.append($("").text(workDetail.work_type));
        childTableRow.append($("").text(workDetail.start_date));
        childTableRow.append($("").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);
}

数据已经正确获取并在网页上显示了主表。但是子表部分没有显示。我强烈感觉“task.work_details”不是获取到的数据的方式，或者在追加子表部分时存在问题。

这是通过API获取的数据：

Object { 
  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"
} 

testing_task_list:1562:13

P粉752826008470 天前548

利用API数据在HTML表格中展示

全部回复(1)我来回复