Tengo datos JSON complejos, a partir de estos datos JSON tengo que mostrar eventos:[] detalles del objeto en la tabla de datos.
de la respuesta total, tengo que mostrar solo eventos: [] datos en la tabla de datos
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>Aquí hay un ejemplo usando literales de mapa y plantilla (comillas invertidas ` )
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><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> 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); } }); });