如何使用标准 json 制作 jquery Datatable 数组？答案

【问题标题】：How to make a jquery Datatable array out of standard json?如何使用标准 json 制作 jquery Datatable 数组？
【发布时间】：2012-12-21 23:26:29
【问题描述】：

首先，我是一个 Total jquery/js newbee！
然后我有一个像这样的长json：

[
{
    "rulesrev": 74,
    "macaddr": "",
    "lat": "3543.03133N",
    "ip": "10.128.113.180",
    "clientname": "D-06-29",
    "relay0mask": "-1",
    "relay1stat": "-1",
    "clientid": 542,
    "bldname": "D_valiasr_zartosht",
    "uptime": "",
    "current": "",
    "temperature": "",
    "softver": "",
    "relay0stat": "0",
    "volume": "100",
    "hardver": " ",
    "relay1mask": "-1",
    "pic": "",
    "comment": " p",
    "lon": "05124.48299E",
    "rtt": "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)",
    "bldaddr": ""
},
{
    "rulesrev": 74,
    "macaddr": "00:10:f3:22:30:08,00:10:f3:22:30:09",
    "lat": "3537.41356N",
    "ip": "10.19.64.63",
    "clientname": "M-19-013",
    "relay0mask": "-1",
    "relay1stat": "-1",
    "clientid": 494,
    "bldname": "tarebar_m19",
    "uptime": "19d 20:05:12",
    "current": "",
    "temperature": "",
    "softver": "",
    "relay0stat": "0",
    "volume": "100",
    "hardver": " n",
    "relay1mask": "-1",
    "pic": "",
    "comment": " ",
    "lon": "05122.94431E",
    "rtt": "2012/08/25 09:19:25.0 (load=0.05) (mem=0.17)",
    "bldaddr": ""
}
]

我想将它转换为一个 Jquery DataTable 可读数组，应该是这样的：

"aaData": [
            /* Reduced data set */
            [ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
            [ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
            [ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
            [ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
            [ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
            [ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
            [ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
            [ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
            [ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
            [ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
            [ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
        [ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
        ],
        "aoColumns": [
            { "sTitle": "Engine" },
        { "sTitle": "Browser" },
            { "sTitle": "Platform" }
]

我该怎么办？
我在这里或其他地方找不到任何帖子来描述这样的事情谁能帮忙？
编辑
第二个数组只是我在datatables 中看到的结构例子。我想将我的 json 更改为像第二个数组这样的结构
编辑： 在我的 json 中，每个数据的第一部分将使表列标题进入第二个数组结构的底部，第二部分即值进入第二个数组结构的顶部。最后应该是这样的：

      "aaData": [
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""],
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""],
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""],
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""],
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""],
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""],
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""],
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""],
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""],
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""]
    ],        "aoColumns": [
{ "sTitle": "macaddr" },
{ "sTitle": "lat" },
{ "sTitle": "ip" },
{ "sTitle": "clientname" },
{ "sTitle": "relay0mask" },
{ "sTitle": "relay0stat" },
{ "sTitle": "relay1stat" },
{ "sTitle": "clientid" },
{ "sTitle": "bldname" },
{ "sTitle": "uptime" },
{ "sTitle": "current" },
{ "sTitle": "temperature" },
{ "sTitle": "softver" },
{ "sTitle": "volume" },
{ "sTitle": "hardver" },
{ "sTitle": "relay1mask" },
{ "sTitle": "pic" },
{ "sTitle": "comment" },
{ "sTitle": "lon" },
{ "sTitle": "rtt" },
{ "sTitle": "bldaddr" },
 ] 
 ]

【问题讨论】：

请改进您的示例，在您的初始 JSON 中，没有提及“Trident”或“Internet Explorer 4.0”。我们应该如何知道这些值的来源？
嗨@JuanMendes 我编辑了我的帖子
您仍然没有解释您的初始 JSON 如何映射到数据表的 JSON。例如[{a:"Trident", b:"IE"}, {a:"WebKit",b:"Safari"}] 将映射到[["Trident","IE"],["WebKit","Safari"]]

标签： javascript jquery multidimensional-array datatable javascript-objects

【解决方案1】：

没有神奇的方法。您必须遍历原始对象并以 datatable 预期的格式创建对象。

假设您希望桌子上有三列

rulesrev,macaddr,lat

您可以使用以下代码生成数据表所需格式的数据http://jsfiddle.net/vZVUc/

var originalJson = [{...}]; // Your JSON blob

// You can't rely on the order of iteration of properties in your JSON object,
// so you have to specify which fields you want
var columns = ["rulesrev", "macaddr", "lat"];

// If you don't care about the order of properties, you can generate columns 
// using the following
var columns = [];
for (var propName in originalJson[0]) {
  columns.push(propName);
}

var dataTableObj = {
   aaData: [],
   aoColumns: []
};

// Stuff the aoColumns array
for (var i=0; i < columns.length; i++) {
    dataTableObj.aoColumns.push({sTitle: columns[i]})
}

// Stuff the aaData array
for (var i=0; i < originalJson.length; i++) {
    var row = originalJson[i];
    var dataTableRow = [];
    for (var j=0; j < columns.length; j++) {
        dataTableRow.push(row[columns[j]]);
    }
    dataTableObj.aaData.push(dataTableRow);
}

// Now you can pass it to your datatable
$('#example').dataTable( dataTableObj );

如果您喜欢冒险，可以使用Array.map（仅在以后的浏览器中支持，但很容易为其创建 shim）。 http://jsfiddle.net/vZVUc/1/

// You can't rely on the order of iteration of properties in your JSON object,
// so you have to specify which fields you want
var columns = ["rulesrev", "macaddr", "lat"];

var dataTableObj = {
   aaData: originalJson.map(function(row) {
      return columns.map(function(col){
          return row[col];
      })
   }) ,
   aoColumns: columns.map(function(col){
      return {sTitle: col}
   });
};

~~这没有经过测试，所以可能有错误，但它应该教你如何去做。~~ 示例见http://jsfiddle.net/vZVUc/1/ 和http://jsfiddle.net/vZVUc/

【讨论】：

非常感谢。它表明您确实值得拥有 18k 的声誉。可以介绍一些资源给我学习js数组和对象吗？它会是你的种类。再次感谢
最好的地方是 developer.mozilla.org/en-US/docs/JavaScript/Reference/… 和 developer.mozilla.org/en-US/docs/JavaScript/Reference/… 请注意，某些功能在旧版浏览器中无法使用，但他们建议为所有新功能使用 shim。