javascript - 如何获取ajax响应数组的键以构建数据表头？

Question

我有一个$.post查询，我从 ajax 响应中检索 json 数据。问题是我想将数据加载到数据表中，并且需要动态创建表头。

我的 json 数据采用以下格式:

[{"id":"11105","name":"Gummy Drop (iPhone, Free, ROW except CN, 72.3MB, w"},{"id":"11107","name":"Gummy Drop (iPad, Free, ROW except CN, 72.3MB, w\/ "},{"id":"4274","name":"Z-Redirect Non-Targeted Traffic Dragon City Mobile"},{"id":"6484","name":"Z-Redirect Non-Targeted Traffic Dragon City Mobile"}]

正如大家所看到的，这两个键是 id和name 。我想获取这两个键并用作标题列，但我无法这样做。

代码如下:

$(document).ready(function() {
    window.prettyPrint() && prettyPrint();


    $('#load').click(function()
    {
        var v = $('#drp_v').val();
        var cnt = $('#drp_cnt').val();
        var ctg = $('#drp_ctg').val();
        alert("version :"+v+" category :"+ctg+" country :"+cnt);
        $.post("ajax.php",{'version':v,'category':ctg,'country':cnt,'func':'show_datatable'},
                        function(data)
                        {
                            var aColumns = [{ sTitle: "Week"}, { sTitle: "Winkelformule" }];
                            var oTable = $('#jsontable').dataTable({
                                "columns":aColumns,
                                "sDom": 'T<"clear">lfrtip',
                                    "oTableTools": {

                                        "aButtons": [


                                             {
                                                    "sExtends": "csv",
                                                    "sButtonText": "CSV",

                                             }
                                        ]
                                    }

                            });
                            oTable.fnClearTable();
                            alert(data);
                            for(var i = 0; i < data.length; i++) 
                            {
                                 oTable.fnAddData([
                                            data[i].id,
                                            data[i].name
                                                   ]);                                      
                            } // End For
                        },'json');
    });
});

正如你所看到的这一行:

var aColumns = [{ sTitle: "Week"}, { sTitle: "Winkelformule" }];正在创建<thead> .

现在我的两个问题是:

a) 我想使用这里的按键，以便标题可以是动态的。

b) 其次，您可以看到我在 ajax 调用时初始化数据表。这意味着每次调用 ajax 时，数据表都会被初始化。我想消除它。我希望数据表初始化一次，但是 <thead>每次 ajax 调用被触发时都会被创建。但我只知道创建 <thead>在数据表初始化期间。

Answer 1

Object.keys可能就是您正在寻找的。

response = $.post(YOUR_AJAX_PAAGE)
aColumns = [{ sTitle: "Week"}, { sTitle: "Winkelformule" }]; 
registerredKeys = [];
for(i = 0; i<response.length; i++){
      keycolumns = Object.keys(response[i]); //Get keys of each object
      for(j = 0; j < keycolumns.length; j++){
          if($.inArray({sTitle: keycolumns[j]},registerredKeys)<=0){
               aColumns.push({sTitle: keycolumns[j]}) //Checks if 
               registerredKeys.push( keycolumns[j]);
          }
      }
}

然后渲染aColumns 。解决问题a。对于问题 b，您可能需要制作 json 响应，以便可以事先获取所有 key ，否则您最终会一遍又一遍地初始化 thead，因为您不知道所有数据。您可以保留一个运行列表来查看是否已注册新列。 (公开 PreviousKeys 并在上述代码之后运行它。

if(Object.toJson(registerredKeys) === PreviousKeys){
     //Ignore 
}else{
   PreviousKeys = Object.toJson(registerredKeys)
   //Render new thead
}