Iterate over data to generate a DataTable

This code sets json data, generates table headers to customized headers

<div id="data-table-cont" class="table-hidden">
  <table id="myTable" class="stripe">
    <thead>
      <tr></tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<script>
 $(document).ready(() => {
  $.ajax({
    url: "data/main.json",
    success: (data) => {

      const headers = [
        "Country", 
        "income", // updated field name
        "Area", 
        "Member group", 
        "comments", // updated field name
      ];

      const fieldMap = {
        "country": "Country",
        "income": "Income class",
        "area": "Area",
        "memgroup": "Member group",
        "comments": 'All Comments',
      };

      let tableHeaders = "";

      headers.forEach((header) => {
        const fieldName = header.toLowerCase().replace(/ /g, '');
        const headerName = fieldMap[fieldName];
        tableHeaders += `<th>${headerName}</th>`;
      });

      $("#myTable thead tr").html(tableHeaders);

      let tableRows = "";
      Object.keys(data).forEach((key) => {
        tableRows += "<tr>";
        headers.forEach((header) => {
          const fieldName = header.toLowerCase().replace(/ /g, '');
          let cellValue = data[key][fieldName] || "";
          tableRows += `<td>${cellValue}</td>`;
        });
        tableRows += "</tr>";
      });

      $("#myTable tbody").html(tableRows);

      $('#myTable').DataTable();
    }
  });
});
</script>

You will need to include the js and css from: https://datatables.net/ and also include jquery.