如何使jquery Datatable数组脱离标准json？ [英] How to make a jquery Datatable array out of standard json?

查看：152
本文介绍了如何使jquery Datatable数组脱离标准json？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

首先我是一个Total jquery / js newbee！

那么我有一个这样的长json：

  
rulesrev：74，
macaddr：，
lat：3543.03133N，
ip ：10.128.113.180，
clientname：D-06-29，
relay0mask：-1，
relay1stat：-1 b $ bclientid：542，
bldname：D_valiasr_zartosht，
正常运行时间：，
当前：，
 ：，
softver：，
relay0stat：0，
volume：100，
hardver 
relay1mask：-1，
pic：，
comment：p，
lon：05124.48299E b $ brtt：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，
ay0mask：-1 ，
 relay1stat：-1，
clientid：494，
bldname：tarebar_m19，
正常运行时间：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：[
 / *减少的数据设置* / 
 [Trident，Internet Explorer 4.0，Win 95+，4，X]，
 [Trident，Internet Explorer 5.0，Win 95+ ，5C]，
 [Trident，Internet Explorer 5.5，Win 95+，5.5A]，
 [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 ，Win 2k + / OSX.3 +，1.9，A]，
 [Webkit，Safari 1.2，OSX.3，125.5A]，
 [Webkit，Safari 1.3，OSX.3，312.8A]，
 [Webkit，Safari 2.0，OSX.4 +，419.3，A ，
 [Webkit，Safari 3.0，OSX.4 +，522.1，A] 
]，
aoColumns：[
 {sTitle ：引擎}，
 {sTitle：浏览器}，
 {sTitle：平台} 
]

我该怎么办？

我找不到任何帖子在这里或其他地方描述这样的东西
可以任何人帮助？

编辑

第二个数组只是我在 datatables
示例。我想把我的json改成像第二个数组那样的结构

编辑：
在我的json中，每个数据的第一部分将使表列标题将转到第二个阵列结构的底部，第二个部分是第二个数组结构的顶部。最后它应该是这样的：

 aaData：[
 [74，，3543.03133N ，10.128.113.180，D-06-29，-1，-1，542，D_valiasr_zartosht，，，，，0 ，，-1，，p，05124.48299E，2012/08/15 23：20：55.0（load = 0.05）（mem = 0.11）， b $ b [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（负载= （mem = 0.11），]，
 [74，，3543.03133N，10.128.113.180，D-06-29，-1 542，D_valiasr_zartosht，，，，，0，100，，-1，，p，05124.48299E / 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， 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 ，，，，$，，， $ b [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： mem = 0.11），，
 [74，，3543.03133N，10.128.113.180，D-06-29，-1，-1 ，D_valiasr_zartosht，，，，，0，100，，-1，，p，05124.48299E，2012/08 / 15 23：20：55.0（负载= 0.05）（mem = 0.11），]，
 [74，，3543.03133N，10.128.113.180，D-06-29 ，-1，-1，542，D_valiasr_zartosht，，，，，0，100，，-1 ，05124.48299E，2012/08/15 23：20：55.0（load = 0.0 5）（mem = 0.11），]，
 [74，，3543.03133N，10.128.113.180，D-06-29，-1 ，542，D_valiasr_zartosht，，，，，0，100，，-1，，p，05124.48299E / 08/15 23：20：55.0（load = 0.05）（mem = 0.11），] 
]，aoColumns：[
 {sTitle：macaddr b $ b {sTitle：lat}，
 {sTitle：ip}，
 {sTitle：clientname}，
 {sTitle relay0mask}，
 {sTitle：relay0stat}，
 {sTitle：relay1stat}，
 {sTitle：clientid}，
 {sTitle：bldname}，
 {sTitle：正常运行时间}，
 {sTitle：current}，
 {sTitle }，
 {sTitle：softver}，
 {sTitle：volume}，
 {sTitle：hardver}，
 { sTitle：relay1mask}，
 {sTitle：pic}，
 {sTitle：comment}，
 {sTitle：lon} ，
 {sTitle：rtt}，
 {sTitle：bldaddr}，
] 
]


解决方案

没有魔法办法。您必须遍历原始对象并以datatable的预期格式创建一个对象。



假设您希望在表格上有三列


rulesrev，macaddr，lat


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

  var originalJson = [{...}]; //您的JSON blob 
 
 //您不能依赖JSON对象中属性的迭代顺序
 //因此您必须指定要$ b $的字段b var columns = [rulesrev，macaddr，lat]; 
 
 //如果您不关心属性顺序，可以使用以下
 var columns = []生成列
 //。 
 for（var propName in originalJson [0]）{
 columns.push（propName）; 
} 
 
 var dataTableObj = {
 aaData：[] 
 aoColumns：[] 
}; 
 
 //填充aoColumns数组
 for（var i = 0; i< columns.length; i ++）{
 dataTableObj.aoColumns.push（{sTitle：columns [ i）} 
} 
 
 //为（var i = 0; i< originalJson.length; i ++）设置aaData数组
 {
 var row = originalJson [i]; 
 var dataTableRow = []; （var j = 0; j< columns.length; j ++）
 {
 dataTableRow.push（row [columns [j]]）; 
} 
 dataTableObj.aaData.push（dataTableRow）; 
} 
 
 //现在你可以将它传递给你的datatable 
 $（'＃example'）。dataTable（dataTableObj）;

如果你冒险，可以使用 Array.map （仅在后来的浏览器中支持，但容易创建一个垫片）。 http://jsfiddle.net/vZVUc/1/ 

  //您不能依赖JSON对象中属性的迭代顺序
 //所以你必须指定你想要的字段
 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/ 为例


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

解决方案

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

这篇关于如何使jquery Datatable数组脱离标准json？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆