Loading nested JSON from Instana Eum into JQUERY datatables

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?

You can use `{ data: 'metrics.pageLoads\\.sum' }` to access a JSON key which itself contains a dot. See the official documentation [here](https://datatables.net/reference/option/columns.data) and also [this answer](https://stackoverflow.com/a/59741532/12567365), which shows the same technique in a slightly different context. — andrewJames, Jan 25 '23 at 21:22

score 1 · Accepted Answer · answered Jan 25 '23 at 21:33

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:

thank you! works like a charm. It seems I should have searched even more, both in the documentation and here. — Beavis, Jan 25 '23 at 21:53

Loading nested JSON from Instana Eum into JQUERY datatables

1 Answers1