Use API data to display in HTML tables

Question

I'm writing a script for a web page that gets data from the "Task" document type and its subtable "Work Details" via an API call. Although the data has been fetched correctly, only the data from the Task document type is added to the html table. The following is the code:

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

The data has been correctly obtained and the main table is displayed on the web page. But the subtable part is not displayed. I have a strong feeling that "task.work_details" is not the way to get the data, or there is a problem in appending the subtable part.

This is the data obtained through the 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

Your example object does not have work_details