How to make a jquery Datatable array out of standard json?

问题

Firstly I am a Total jquery/js newbee!
Then I Have a long json like this:

[
{
    "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": ""
}
]  

and i want to convert it to a Jquery DataTable readable array which should be like this:

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

what should i do?
I can not find any post here or elsewhere to describe something like this can anyone help?
EDIT
the second array is just a structure i saw in datatables example. and i want to change my json to a structure like the second array
EDIT: in my json the first part of each data will make the table column header that will go to the bottom of second array structure and the second part which is the values goes to the second array structure top part. and finally it should looks like this:

      "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" },
 ] 
 ]

回答1:

There's no magic way. You have to iterate through your original object and create an object in the format expected by datatable.

Suppose you want three columns on your table

rulesrev,macaddr,lat

You could use the following code to generate the data in the format required by datatables 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 );

If you're adventurous you can use Array.map (supported in later browsers only, but easy to create a shim for). 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}
   });
}; 

This isn't tested, so there are probably bugs, but it should teach you how to do it. See http://jsfiddle.net/vZVUc/1/ and http://jsfiddle.net/vZVUc/ for examples

来源：https://stackoverflow.com/questions/14209408/how-to-make-a-jquery-datatable-array-out-of-standard-json