Verwenden Sie API-Daten zur Anzeige in HTML-Tabellen

Question

Ich schreibe ein Skript für eine Webseite, die über API-Aufrufe Daten aus dem Dokumenttyp „Aufgabe“ und seiner Untertabelle „Arbeitsdetails“ abruft. Obwohl die Daten korrekt abgerufen wurden, werden der HTML-Tabelle nur die Daten aus dem Dokumenttyp „Aufgabe“ hinzugefügt. Hier ist der 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);
}

Die Daten wurden korrekt erfasst und die Haupttabelle wird auf der Webseite angezeigt. Der untergeordnete Tabellenteil wird jedoch nicht angezeigt. Ich habe das starke Gefühl, dass „task.work_details“ nicht der Weg ist, die Daten abzurufen, oder dass es ein Problem beim Anhängen des Untertabellenteils gibt.

Dies sind die über die API erhaltenen Daten:

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

您的示例对象没有work_details