Search code examples
javascriptjsondatatabledatatables

how to show complex json data in datatable

I have complex JSON data, from this JSON data I have to show events:[] object details in the data table.

from the total response i have to show only events:[] data in datatable

const bindtoDatatable = (data) => { console.log(data)}
$(document).ready(function() {
  $.ajax({
    url: 'https://e3b36496-1168-4841-9ed2-9d44c93d1d4d.mock.pstmn.io/v2/agent-assist-profile/9047478154',
    type: 'GET',
    dataType: 'json',
    success: function(response) {
      var metadata = response;
      bindtoDatatable(metadata);
    }
  });
});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.12.0/css/dataTables.bootstrap4.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.12.0/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.12.0/js/dataTables.bootstrap4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <div class="container">
    </br>
    </br>
    <table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Event Id</th>
          <th>Cause.id</th>
          <th>location.city</th>
          <th>created Date</th>
          <th>currentStage.description</th>
          <th>Invoiced</th>
        </tr>
      </thead>
      <tbody>
        <!-- data -->
      </tbody>
    </table>
  </div>
</body>

Solution

  • Here is an example using map and template literals (backticks ` )

    const fmtDate = dString => new Date(dString).toLocaleDateString();
const $table = $("#table_id");
const bindtoDatatable = (data) => {
 const events = data.response.results.events;
// console.log(events)
 $table.find("tbody").html(events.map(event => `<tr>
   <td>${event.id}</td><td>${event.cause.id}</td>
   <td>${event.location.city}</td><td>${fmtDate(event.created)}</td>
   <td>${event.currentStage.description}</td>
   <td>${fmtDate(event.accounting.invoiced)}</td></tr>`).join(""));

  $table.DataTable(); // run after creation
}
$(document).ready(function() {
  $.ajax({
    url: 'https://e3b36496-1168-4841-9ed2-9d44c93d1d4d.mock.pstmn.io/v2/agent-assist-profile/9047478154',
    type: 'GET',
    dataType: 'json',
    success: function(response) {
      var metadata = response;
      bindtoDatatable(metadata);
    }
  });
});
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.12.0/css/dataTables.bootstrap4.min.css">
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.12.0/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.12.0/js/dataTables.bootstrap4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <div class="container">
    </br>
    </br>
    <table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
      <thead>
        <tr>
          <th>Event Id</th>
          <th>Cause.id</th>
          <th>location.city</th>
          <th>created Date</th>
          <th>currentStage.description</th>
          <th>Invoiced</th>
        </tr>
      </thead>
      <tbody>
        <!-- data -->
      </tbody>
    </table>
  </div>
</body>