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 >
</br>
</br>
<table id="table_id" 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>CodePudding user response：
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 >
</br>
</br>
<table id="table_id" 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>CodePudding user response：
<div >
</br>
</br>
<table id="table_id" 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>
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);
}
});
});