如何在数据表中显示复杂的 json 数据

Question

I have complex JSON data, from this JSON data I have to show events:[] object details in the data table.我有复杂的 JSON 数据，从这个 JSON 数据我必须在数据表中显示事件：[] object 详细信息。

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/bootstrap@4.6.1/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/bootstrap@4.6.1/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>

Answer 1

Here is an example using map and template literals (backticks ` )这是一个使用 map 和模板文字（反引号` ）的示例

 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/bootstrap@4.6.1/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/bootstrap@4.6.1/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>

Answer 2

<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 class="eventTableBody">
    <!-- data -->
  </tbody>
</table>

and for js 对于 js

 const bindtoDatatable = (data) => { var events = response.response.results.events; for (var event in events){ var element = events[event]; $(".eventTableBody").append(`<tr> <td>${element.id}</td> <td>${element.cause.id}</td> <td>${element.location.city}</td> <td>${element.created}</td> <td>${element.currentStage.description}</td> <td>${element.accounting.invoiced}</td> </tr>`) }} $(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); } }); });

如何在数据表中显示复杂的 json 数据

问题描述

2 个解决方案

解决方案1
2 已采纳 2022-08-11 11:02:48

解决方案2
0 2022-08-11 12:42:23

如何在数据表中显示复杂的 json 数据

问题描述

2 个解决方案

解决方案1 2 已采纳 2022-08-11 11:02:48

解决方案2 0 2022-08-11 12:42:23

解决方案1
2 已采纳 2022-08-11 11:02:48

解决方案2
0 2022-08-11 12:42:23