Как создать вложенную таблицу данных из ответа объекта массива JSON
Я получаю ответ API в формате JSON с вложенными массивами. Я хочу проанализировать его во вложенных данных. Я пробовал для этого, но это не сработает. Может ли кто-нибудь дать мне знать, где я сделал ошибку. В JSON у меня есть данные о пассажирах, и у каждого пассажира есть несколько водителей, я хочу показать их в таблице данных во вложенном формате, например, Passenger является родительским, а соответствующие водители - дочерними.
ожидаемый результат
Вот мой ответ в формате JSON:
/* Formatting function for row details - modify as you need */
function format(driver_data) {
// `d` is the original data object for the row
return '<table cellpadding = "5" cellspacing = "0" border = "0" style = "padding-left:50px;">' +
'<tr>' +
'<td>Full name:</td>' +
'<td>' + driver_data.employeename + '</td>' +
'</tr>' +
'<tr>' +
'<td>Extension number:</td>' +
'<td>' + driver_data.email + '</td>' +
'</tr>' +
'</table>';
}
$(document).ready(function () {
var table = $('.trip_unmacthed').DataTable({
type: "GET",
url: "https://api.myjson.com/bins/13woes",
dataType: "json",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{
"data": "employeename"
},
{
"data": "email"
}
],
"order": [[1, 'asc']]
});
// Add event listener for opening and closing details
$('.trip_unmacthed tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
});<script src = "https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src = "https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table class = "table table-striped table-bordered table-hover trip_unmacthed">
<thead>
<tr>
<th>User Type</th>
<th> Name</th>
<th>Start Location</th>
<th>Drop Location</th>
<th> Date </th>
<th>Actions</th>
</tr>
</thead>
<tbody id = "myData">
</tbody>
</table>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Не уверен, что ваш JSON. Если у вас есть пассажир в вашем JSON, например.
{
"passenger_data": [
{
"employeename": "Passenger A",
"email": null,
"driver_data": [
{
"employeename": "Driver A1",
"email": null,
"distance": 0,
},
{
"employeename": "Driver A2",
"email": null,
"distance": 0,
},
],
"mobilenumber": "+12344576",
},
]
}
то вы должны сделать это как
"columns": [
{"passenger_data": "employeename"},
{"passenger_data": "driver_data.employeename"},
{"passenger_data": "driver_data.email"}
],
возможно, вы не используете оператор .
@Tamara Тамара Не знаю, чего вы пытаетесь достичь, но в нем было много синтаксических ошибок. это примерное представление о том, что вы хотите. В нем также есть ответ API jsfiddle.net/Lyo0wcpa/4
чтобы было более понятно, если вы пытаетесь создать дочернюю строку в своей таблице, это также может вам помочь.. datatables.net/examples/api/row_details.html
это то, что я пытаюсь сделать, но, к сожалению, не могу
да, но это не то, чего я пытаюсь достичь, но да, у меня есть идея. Но все же я изо всех сил пытаюсь это сделать
у вас есть ответ API, показанный вам в таблице. и это способ дать вам представление о том, как это сделать. Для дальнейшего улучшения пользовательского интерфейса посетите первую ссылку, которую я отправил.
Я сделал, но не работает, не могли бы вы проверить и сообщить мне, что я пропустил jsfiddle.net/8m5yoj9L/5
Измените пассажирские_данные на данные в соответствии с API Docs и вашей функцией формата.
$(document).ready(function () {
function format(driver_data) {
console.info(driver_data); var b = ''; var i;
for (i = 0; i < driver_data.length; i++) {
b = b + '<tr>' +
'<td></td>' +
'<td>' + driver_data[i].employeename + '</td>' +
'<td>' + driver_data[i].email + '</td>' +
'<td>' + driver_data[i].distance + '</td>' +
'</tr>';
}
return b;
}
var table = $('#example').DataTable({
"ajax": "https://api.myjson.com/bins/y53hs",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{
"data": "employeename"
},
{
"data": "email"
},
{
"data": "mobilenumber"
}
],
"order": [[1, 'asc']]
});
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
console.info(row.data());
row.child(format(row.data().driver_data)).show();
tr.addClass('shown');
}
});
});
Комментарии не для расширенного обсуждения; этот разговор был перешел в чат.
пожалуйста, проверьте, я обновил свой формат json, я пытался, но это не сработает