Ajax Daten Val zu Tabellenkopf zuweisen

Question

In meinem Ajax Anruf möchte ich jede key als <td> zu einer einzigen Zeile in der $('#shelf .table thead tr') zuweisen. Dies ist mein Versuch, der nicht funktioniert.

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 DATA:

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

Answer 1

Wenn Sie die for-Schleife erfordern die Header der Tabelle, Extrahieren der Schlüssel von den Daten zu erstellen, müssen Sie die verwenden erste Reihe.

Sie sollten auch die Schlüssel dieser Zeile beibehalten, um sicherzustellen, dass die anderen Zeilen in den gleichen Spalten angeordnet sind. Ich bemerke, dass du "." um diese als Eigenschaften in der else-Klausel am Ende dieses Snippets zu erhalten.

starten durch diese Schlüssel bekommen - setzen diese in der Nähe der Spitze des Erfolgs-Handler:

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

Jetzt können Sie eine Schleife über diese Ihre erste Reihe zu erstellen (fügen Sie dies in der thead Abschnitt):

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

In diesem anderen Abschnitt, dem tbody, können Sie dies tun, um sicherzustellen, dass es übereinstimmt. Diese Referenzen, die Tasten Variable oben, in der gleichen Reihenfolge, und den Schlüssel verwendet es den Wert in dem Artikel zu sehen:

$.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); 
}); 

In diesem Snippet hier - die „_k“ ist die Zeilennummer, ich habe mit einem Unterstrich versehen, um einem Leser klarzumachen, dass wir nicht daran interessiert sind.