利用API数据在HTML表格中展示
P粉752826008
P粉752826008 2023-09-13 09:14:49
0
1
343

我正在为一个网页编写脚本,该脚本通过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粉752826008
P粉752826008

全部回复(1)
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!