如何将Instana嵌套JSON的pageLoads.sum数据加载到jQuery DataTables

我从IBM Instana获取页面加载指标的嵌套JSON数据，要加载到jQuery DataTables表格中，但无法正确读取metrics字段下带点的键名pageLoads.sum对应的双层数组值（时间戳和页面加载次数）。

Instana返回的JSON结构 #

{
  "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
  }
}

当前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
    });
});

尝试过的方法及结果 #

• 使用metrics."pageLoads.sum"：DataTables报错“Requested unknown parameter 'metrics.....'”
• 使用{ data: 'metrics' }：单元格显示[object Object]
• 使用{ data: 'metrics[0]' }：单元格为空
• 使用{ data: 'metrics[, ]' }：单元格为空

解决方案 #

不需要修改原始JSON结构，两种方法可以直接解决：

方法1：使用columns.render函数 #

通过自定义渲染函数直接访问对象属性，提取所需值：

$(document).ready(function () {
    $('#example').DataTable({
        ajax: {
            url: 'data/daily.txt',
            dataSrc: 'items',
        },
        columns: [
            { data: 'cursor.offset' },
            { data: 'name' },
            { data: 'earliestTimestamp' },
            // 提取pageLoads.sum中的时间戳
            { 
                data: 'metrics',
                render: function(data) {
                    return data['pageLoads.sum'][0][0];
                }
            },
            // 提取pageLoads.sum中的页面加载次数
            { 
                data: 'metrics',
                render: function(data) {
                    return data['pageLoads.sum'][0][1];
                }
            }
        ],
        deferRender: true
    });
});

方法2：预处理AJAX返回数据 #

在dataSrc中提前解析数据，将所需值提取为顶层字段，后续直接引用：

$(document).ready(function () {
    $('#example').DataTable({
        ajax: {
            url: 'data/daily.txt',
            dataSrc: function(json) {
                // 遍历每个条目，提取所需字段
                json.items.forEach(item => {
                    const pageLoadData = item.metrics['pageLoads.sum'][0];
                    item.pageLoadTimestamp = pageLoadData[0];
                    item.pageLoadCount = pageLoadData[1];
                });
                return json.items;
            }
        },
        columns: [
            { data: 'cursor.offset' },
            { data: 'name' },
            { data: 'earliestTimestamp' },
            { data: 'pageLoadTimestamp' },
            { data: 'pageLoadCount' }
        ],
        deferRender: true
    });
});

内容的提问来源于stack exchange，提问作者Beavis