Loading nested JSON from Instana Eum into JQUERY datatables - json

Question

I have read plenty of resources and questions here regarding nested JSON but none are asking the exact same.
I am trying to use IBM Instana to retrieve the page load metrics what I plan to load into a JQUERY DataTables table.
The nested JSON I get from Instana:
{
"items" : [ {
"name" : "/Content/Search.htm",
"earliestTimestamp" : 1674432701496,
"cursor" : {
"#class" : ".IngestionOffsetCursor",
"ingestionTime" : 1674509519588,
"offset" : 1
},
"metrics" : {
"pageLoads.sum" : [ [ 1674511200000, 79.0 ] ]
}
}, {
"name" : "/Content/Home.htm",
"earliestTimestamp" : 1674435256403,
"cursor" : {
"#class" : ".IngestionOffsetCursor",
"ingestionTime" : 1674509519588,
"offset" : 2
},
"metrics" : {
"pageLoads.sum" : [ [ 1674511200000, 45.0 ] ]
}
} ],
"canLoadMore" : false,
"totalHits" : 2,
"totalRepresentedItemCount" : 2,
"totalRetainedItemCount" : 2,
"adjustedTimeframe" : {
"windowSize" : 169200000,
"to" : 1674511200000
}
}
and the code to load it and add it to a table in DataTables:
$(document).ready(function () {
$('#example').DataTable({
ajax: {
url: 'data/daily.txt',
dataSrc: 'items',
},
columns: [
{ data: 'cursor.offset' },
{ data: 'name' },
{ data: 'earliestTimestamp' },
{ data: 'metrics[0]' },
],
deferRender: true
});
});
While the whole thing is straightforward, even the nested cursor.offset with the dot, I fail to assign the two value in metrics\pageLoads.sum, especially that the nested pageLoads.sum also contains a dot and the values are in double square brackets without quotation marks. The two values (date and number of page loads) I would like to have in two separate columns, but as fail to load them at all, I went on to load them somehow into one cell, but even that does not work.
I have tried to add pageLoads.sum (then as 'metrics."pageLoads.sum"')in quotes, but didn't help, DataTables threw the error message "Requested unknown parameter 'metrics.....<and the variation I have tried>.
I have also tried:
{ data: 'metrics' }, this returns [object Object] in the html cells
{ data: 'metrics[0]' }, no error from DT, but cell remains empty
{ data: 'metrics[, ]' },no error from DT, but cell remains empty
Is there any way to access the two values within metrics\pageLoads.sum or do I have to change JSON structure before this can be done?

Answer 1

To split the contents of your nested arrays...
"pageLoads.sum" : [ [ 1674511200000, 45.0 ] ]
...into two columns, you can use the following:
columns: [
{ data: 'cursor.offset' },
{ data: 'name' },
{ data: 'earliestTimestamp' },
{
data: 'metrics.pageLoads\\.sum',
render: function (data, type, row) {
return data[0][0];
}
},
{
data: 'metrics.pageLoads\\.sum',
render: function (data, type, row) {
return data[0][1];
}
}
]
This uses the double-backslash I mentioned in a comment (ref.) and also two column renderers which handle the splitting of the nested arrays into 2 separate fields.
The end result looks like this: