如何創建HTML格式的數據表爲以下JSON，表的列名可能會有所不同

Question

如果可能的話給我的jQuery代碼使用數據表插件

[ 
    ["Sales", { 
    "2016-06-30": 102.18, 
    "2014-12-31": 70.98, 
    "2014-09-30": 86.41, 
    "2014-03-31": 71.31, 
    "2015-06-30": 87.59, 
    "2014-06-30": 81.31, 
    "2015-03-31": 74.58, 
    "2015-12-31": 80.3, 
    "2013-12-31": 71.24, 
    "2016-03-31": 83.05, 
    "2016-09-30": 97.93, 
    "2015-09-30": 87.65 
    }], 
    ["Expenses", { 
    "2016-06-30": 87.26, 
    "2014-12-31": 66.6, 
    "2014-09-30": 78.66, 
    "2014-03-31": 68.09, 
    "2015-06-30": 77.22, 
    "2014-06-30": 73.9, 
    "2015-03-31": 70.75, 
    "2015-12-31": 69.57, 
    "2013-12-31": 66.2, 
    "2016-03-31": 73.83, 
    "2016-09-30": 83.59, 
    "2015-09-30": 76.56 
    }], 
    ["Operating Profit", { 
    "2016-06-30": 14.92, 
    "2014-12-31": 4.38, 
    "2014-09-30": 7.75, 
    "2014-03-31": 3.22, 
    "2015-06-30": 10.37, 
    "2014-06-30": 7.41, 
    "2015-03-31": 3.83, 
    "2015-12-31": 10.73, 
    "2013-12-31": 5.04, 
    "2016-03-31": 9.22, 
    "2016-09-30": 14.34, 
    "2015-09-30": 11.09 
    }], 
    ["OPM", { 
    "2016-06-30": 14.6, 
    "2014-12-31": 6.17, 
    "2014-09-30": 8.97, 
    "2014-03-31": 4.52, 
    "2015-06-30": 11.84, 
    "2014-06-30": 9.11, 
    "2015-03-31": 5.14, 
    "2015-12-31": 13.36, 
    "2013-12-31": 7.07, 
    "2016-03-31": 11.1, 
    "2016-09-30": 14.64, 
    "2015-09-30": 12.65 
    }], 
    ["Other Income", { 
    "2016-06-30": 0.7, 
    "2014-12-31": 1.24, 
    "2014-09-30": 1.78, 
    "2014-03-31": 2.68, 
    "2015-06-30": 0.72, 
    "2014-06-30": 1.52, 
    "2015-03-31": 1.85, 
    "2015-12-31": 0.84, 
    "2013-12-31": 4.29, 
    "2016-03-31": 1.85, 
    "2016-09-30": 0.68, 
    "2015-09-30": 0.82 
    }], 
    ["Depreciation", { 
    "2016-06-30": 2.25, 
    "2014-12-31": 2.35, 
    "2014-09-30": 2.4, 
    "2014-03-31": 2.56, 
    "2015-06-30": 2.31, 
    "2014-06-30": 2.4, 
    "2015-03-31": 2.3, 
    "2015-12-31": 2.34, 
    "2013-12-31": 2.58, 
    "2016-03-31": 2.28, 
    "2016-09-30": 2.26, 
    "2015-09-30": 2.38 
    }], 
    ["Interest", { 
    "2016-06-30": 5.88, 
    "2014-12-31": 6.12, 
    "2014-09-30": 6.2, 
    "2014-03-31": 4.94, 
    "2015-06-30": 6.13, 
    "2014-06-30": 5.96, 
    "2015-03-31": 6.64, 
    "2015-12-31": 5.96, 
    "2013-12-31": 6.08, 
    "2016-03-31": 5.88, 
    "2016-09-30": 5.82, 
    "2015-09-30": 6.21 
    }], 
    ["Profit before tax", { 
    "2016-06-30": 7.5, 
    "2014-12-31": -2.85, 
    "2014-09-30": 0.93, 
    "2014-03-31": -1.6, 
    "2015-06-30": 2.65, 
    "2014-06-30": 0.58, 
    "2015-03-31": -3.27, 
    "2015-12-31": 3.28, 
    "2013-12-31": 0.66, 
    "2016-03-31": 2.91, 
    "2016-09-30": 6.94, 
    "2015-09-30": 3.32 
    }], 
    ["Tax", { 
    "2016-06-30": 2.53, 
    "2014-12-31": -0.45, 
    "2014-09-30": 0.16, 
    "2014-03-31": -0.57, 
    "2015-06-30": 0.99, 
    "2014-06-30": 0.11, 
    "2015-03-31": -0.36, 
    "2015-12-31": 0.06, 
    "2013-12-31": 0.24, 
    "2016-03-31": 0.55, 
    "2016-09-30": 2.46, 
    "2015-09-30": 1.21 
    }], 
    ["Net Profit", { 
    "2016-06-30": 4.96, 
    "2014-12-31": -2.4, 
    "2014-09-30": 0.77, 
    "2014-03-31": -1.02, 
    "2015-06-30": 1.66, 
    "2014-06-30": 0.46, 
    "2015-03-31": -2.9, 
    "2015-12-31": 3.22, 
    "2013-12-31": 0.43, 
    "2016-03-31": 2.36, 
    "2016-09-30": 4.48, 
    "2015-09-30": 2.11 
    }] 
] 

Answer 1

鑑於你的數據結構創建動態HTML表這應該工作：

var columns = []; 
var dates = []; 
var data = []; 
for (var i = 0; i < arr.length; i++) { 
    for (var key in arr[i][1]) { 
    if (dates.indexOf(key) === -1) { 
     dates.push(key) 
    } 
    } 
} 
for (var i = 0; i < dates.length; i++) { 
    var tempObj = { 
    date: dates[i], 
    } 
    for (var x = 0; x < arr.length; x++) { 
    //console.log(arr[x][0], arr[x][1][dates[i]]) 
    tempObj[arr[x][0]] = arr[x][1][dates[i]] 
    } 
    data.push(tempObj) 
} 
for (var key in data[0]) { 
    columns.push({ 
    title: key.charAt(0).toUpperCase() + key.substring(1), 
    data: key 
    }); 
} 
console.log(dates); 
console.log(data); 
console.log(columns); 
$(function() { 
    $("#example").DataTable({ 
    "columns": columns, 
    "data": data 
    }); 
}); 

希望有所幫助。工作示例here。