API 데이터를 사용하여 HTML 테이블에 표시

Question

API 호출을 통해 "작업" 문서 유형 및 해당 하위 테이블 "작업 세부정보"에서 데이터를 가져오는 웹 페이지용 스크립트를 작성 중입니다. 데이터를 올바르게 가져왔지만 작업 문서 유형의 데이터만 html 테이블에 추가됩니다. 코드는 다음과 같습니다.

으아악

데이터가 올바르게 획득되었으며 기본 테이블이 웹 페이지에 표시됩니다. 그러나 하위 테이블 부분은 표시되지 않습니다. "task.work_details"가 데이터를 가져오는 방식이 아니거나 하위 테이블 부분을 추가하는 데 문제가 있다는 느낌이 강합니다.

API를 통해 얻은 데이터는 다음과 같습니다.

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

Answer 1

예제 개체에는 work_details

이 없습니다.