将ajax数据val分配给表头

Question

在我的ajax调用中，我想将每个key作为<td>分配给$('#shelf .table thead tr')中的单个行。这是我尝试失败的原因。

AJAX：

function ajax_call($aff){ 
    $.ajax({          
     url: 'fill_crosstab.php',       
     data: {action:$aff},            
     dataType: 'json',     
     success: function(data){ 
      $('#shelf .table tbody').empty(); 

      $('#shelf .table thead tr').empty(); 
      for (var i = 0; i < key.length; i++) { 
       out += "<td>" + key[i] + "</td>"; 
      } 
      $('#shelf .table thead tr').append(out + "</tr>"); 

      if ($aff == "database") { 
       $.each(data, function(key, val) { 
        $('.dropdown-menu').append("<a class='dropdown-item' href='#'>" + val.Affiliation + "</a>"); 
       }); 
        // Bind the event now, after the html element has bend created. 
       $(".dropdown-menu a").on("click", function() { 
        var selText = $(this).text(); 
        $('.shelf-header').empty(); 
        $('.shelf-header').append(selText); 
        ajax_call(selText); 
       }); 
      } else { 
       $.each(data, function(key, val) { 
        $('#shelf .table tbody').append("<tr><td>" + val.LAST + "</td><td>" + val.FIRST + "</td><td>" + val.MDC + "</td><td>" + val.RADIO + "</td><td>" + val.eMEDS + "</td><td>" + val.FireApp + "</td><td>" + val.P1 + "</td></tr>"); 
       }); 
      } 
     } 
    }); 
    }; 

JSON数据：

[{"LAST":"JONE","FIRST":"MARY","MDC":"07\/23\/2003","RADIO":"08\/22\/2002","eMEDS":"02\/09\/2015","FireApp":"09\/11\/2012","P1":" "}] 

Answer 1

如果您需要在for循环创建表的标题，提取数据的密钥，则需要使用第一排。

您还应该保留该行的键以确保其他行排列在相同的列中。我注意到你使用“。”将这些属性作为片段底部的else子句中的属性。

开始通过获得这些密钥 - 把这个接近成功处理程序的顶部：

var keys = Object.keys(data[0]); 

现在你可以遍历它创建您的第一行（把这个在THEAD部分）：

for (var i = 0; i < keys.length; i++) { 
    out += "<td>" + keys[i] + "</td>"; 
} 

在其他部分，tbody中，您可以这样做以确保其匹配。该键上方变量，以相同的顺序，并使用该密钥有此引用来查找值项：

$.each(data, function(_k, val) { 
    var out = "<tr>"; 
    for(var i =0; i< keys.length; i++) { 
     out += "<td>" + val[keys[i]] + "</td>"; 
    } 
    out += "</tr>"; 
    $('#shelf .table tbody').append(out); 
}); 

在这个片段在这里 - 在“_K”是行号，我已经用一个下划线作为前缀，使读者明白我们对它不感兴趣。