Gunakan data API untuk dipaparkan dalam jadual HTML

Question

Saya sedang menulis skrip untuk halaman web yang mendapat data daripada jenis dokumen "Task" dan subtable "Butiran Kerja" melalui panggilan API. Walaupun data telah diambil dengan betul, hanya data daripada jenis dokumen Tugas ditambahkan pada jadual html. Ini kodnya:

$(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);
}

Data telah diperoleh dengan betul dan jadual utama dipaparkan pada halaman web. Tetapi bahagian subtable tidak dipaparkan. Saya mempunyai perasaan yang kuat bahawa "task.work_details" bukanlah cara untuk mendapatkan data, atau terdapat masalah dalam menambahkan bahagian subtable.

Ini adalah data yang diperolehi melalui 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

Answer 1

Objek contoh anda tidak mempunyai work_details