Display data fetched from API in HTML Table

I am writing a script for a web page that makes an ajax call & fetches data using API cal from "Task" doctype and its child table "Work Details". While the data is fetched properly, Only the data from the Task doc type is added to the html table. Here’s the code —-

$(document).ready(function() {
  // Get the project ID filter value from the URL query string
  var projectId = getQueryParam("project_id");

  // Set the projectId as the text of the <h2> element
  $("#project_id").text("Project Name: " + 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); // Log the API response to check the data

  var tasks = response.data;

  // Loop through each task
  tasks.forEach(function(task) {
    console.log(task); // Log each task to check the data

    var mainTableRow = $("<tr>");
    mainTableRow.append($("<td>").text(task.farmer));
    mainTableRow.append($("<td>").text(task.survey_number));
    mainTableRow.append($("<td>").text(task.total_in_cubic_mts));
    mainTableRow.append($("<td>").text(task.total_fuel_expenses));
    mainTableRow.append($("<td>").text(task.water_storage));

    var workDetails = task.work_details;

    if (workDetails && workDetails.length > 0) {
      console.log(workDetails); // Log the work details to check the data

      var childTableBody = $("<tbody>"); // Create a separate tbody for child rows

      workDetails.forEach(function(workDetail) {
        var childTableRow = $("<tr>");
        childTableRow.append($("<td>").text(workDetail.work_type));
        childTableRow.append($("<td>").text(workDetail.start_date));
        childTableRow.append($("<td>").text(workDetail.end_date));
        console.log(childTableRow); // Log each child table row to check

        childTableBody.append(childTableRow); // Append the child row to the child tbody
      });

      mainTableRow.after(childTableBody); // Append the child tbody after the main row
    }

    $("#taskTable tbody").append(mainTableRow); // Append the main row to the main tbody
  });
},
    error: function(xhr) {
      console.log(xhr.responseText);
    }
  });
});

// Function to get the value of a query parameter from the URL
function getQueryParam(param) {
  var urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(param);
}

The data is fetched properly and the main table is displayed on the webpage. But the childTable part isn’t shown.
I strongly feel "task.work_details" is not the way to get the fetched data or there’s a problem with the append childTable part.

here’s the fetched data by 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