如何获取ajax响应数组的密钥以建立数据表的标头

How to get the key of ajax response array in order to build up header of datatable?

本文关键字：密钥 建立 数据表 数组 响应 何获取 获取 ajax      更新时间：2023-09-26

我有一个$.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） 我想在这里使用键，以便 thead 可以是动态的。

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

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 响应，以便您可以事先获得所有密钥，否则您最终会一遍又一遍地初始化 thead，因为您不知道所有数据。您可以保留一个运行列表，以查看是否已注册新列。（公开 PreviousKeys 并在上述代码段之后运行它。

if(Object.toJson(registerredKeys) === PreviousKeys){
     //Ignore 
}else{
   PreviousKeys = Object.toJson(registerredKeys)
   //Render new thead
}
相关文章：