How to populate dataTable with multidimensional array with dynamic key - datatables

Question

I have an array like this:
"products": {
"111111": {
"date": "01.01.2018",
"amount": 10,
"user_id": "user1",
}
"222222": {
"date": "10.10.2018",
"amount": 15,
"user_id": "user1,
}
}
"111111" and "222222" are IDs and they are generated dynamically, depending on selected user.
I want to display the following columns: product_id, date, amount, user_id
Is there a way to populate the table when a column name is dynamic ?
Thanks!

Answer 1

If you can change the format of your json slightly, you can easily just assign it as an array for the data attribute when initializing datatables. If that is not an option, you could just parse it into the below format by iterating through the key-value pairs and adding that data to an array of jsons.
$(document).ready(function() {
var products = [{
"product_id": "111111",
"date": "01.01.2018",
"amount": 10,
"user_id": "user1",
},
{
"product_id": "222222",
"date": "10.10.2018",
"amount": 15,
"user_id": "user1",
}
];
var table = $('#example').DataTable({
data: products,
columnDefs: [
{ targets: 0, data: "product_id"},
{ targets: 1, data: "date" },
{ targets: 2, data: "amount" },
{ targets: 3, data: "user_id" }
]
});
});
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<div class="container">
<table id="example" class="display nowrap" width="100%">
<thead>
<tr>
<th>product_id</th>
<th>date</th>
<th>amount</th>
<th>user_id</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>