How to get data from nested array in DataTables? - datatables

Question

I used to download data from a json file in this format to my DataTables table:
{
"data": [
["n/a","668","01.11.2021 14:16:20", ... ],
["n/a","670","05.11.2021 23:23:54", ...]
]
}
...
"ajax": "first.json",
columns: [
{ data: 0 },
{ data: 1 }
...
And everythig was ok
But now format of my json was changed:
{
"data": {
"deals": [["n/a", "718", "30/11/2021 21:46:14"], ["", "718", "30/11/2021 21:46:14"], ... ],
"stops": [["07/10/2021 21:48:28", "BTCUSDT"], ["07/10/2021 21:48:28", "BTCUSDT"], ... ]
}
}
And I try to get data like this and get "No data available in table":
...
"ajax": "first.json",
columns: [
{ data: 'deals.0' },
{ data: 'deals.1' }
...
How can I get data from new format of json to my table?

Answer 1

Here is your new JSON structure, provided by the URL:
{
"data": {
"deals": [
["n/a", "718", "30/11/2021 21:46:14"],
["", "718", "30/11/2021 21:46:14"]
],
"stops": [
["07/10/2021 21:48:28", "BTCUSDT"],
["07/10/2021 21:48:28", "BTCUSDT"]
]
}
}
In this structure, the location of the deals data is data.deals. This location points to an array of arrays, which is what DataTables needs (or an array of objects).
(This means the table will only have access to the deals data, since the stops data is in a separate location entirely. But I will assume you only want the deals data to match your original example.)
You therefore need to use the DataTables dataSrc option to tell DataTables where to look in your new JSON:
<table id="example" class="display" style="width:100%"></table>
and:
$(document).ready(function() {
$('#example').DataTable( {
ajax: {
method: "GET",
url: "first.json", // or whatever URL you want to use
dataSrc: "data.deals"
},
"columns": [
{ "title": "Col 1" },
{ "title": "Col 2" },
{ "title": "Col 3" }
]
} );
} );
Because each row of data is an array, you don't need to specify the specific array indexes in your columns - DataTables will iterate over each row array for you.
The result is: