HTML-Tabelle aus JSON-Daten erstellen

Question

Ich habe eine HTML-Datei, die dieses Snippet enthält.

<div> 
    <table id="apps"></table> 
</div> 

Ich erhalte JSON-Daten, die wie folgt aussieht:

{ 
    "1": [ 
     { 
      "A": "", 
      "B": "", 
      "C": "", 
      "D": "", 
      "E": "" 
     } 
    ] 
} 

Es wird genau ein "1", aber es kann in der Liste der "1" mehr als ein Wörterbuch sein. In diesem Beispiel haben wir nur einen {} innerhalb der Liste, [], aber es kann mehrere {} geben, die genau fünf Elemente enthalten, wie oben gezeigt.

Ich möchte eine Tabelle aus diesen Daten erstellen, wobei jede Zeile eine einzige {} innerhalb der [] darstellt und fünf Spalten hat, die jeweils A, B, C, D, E repräsentieren.

Ich bin unsicher, ob ich die Struktur von diesem haben sollte, die Tags bereits in meinem HTML (dies ist nicht in meinem HTML-Code enthalten) und dann füllen diese Tags oder sollte meine Funktion, die diese Daten in meine HTML-Datei lädt, Access-Tabelle ID = "apps" und erstellen Sie diese Tags und dann diese Tags füllen? Welches ist besser? und Wie könnte man dies effizient erreichen?

Answer 1

Versuchen Sie diese einfache Arbeitsbeispiel. Ich hoffe, es wird nach Ihren Erwartungen funktionieren.

var dataObj = { 
 
    "1": [{ 
 
      "A": "", 
 
      "B": "", 
 
      "C": "", 
 
      "D": "", 
 
      "E": "" 
 
     }, 
 
     { 
 
      "F": "", 
 
      "G": "", 
 
      "H": "", 
 
      "I": "", 
 
      "J": "" 
 
     }, 
 
     { 
 
      "K": "", 
 
      "L": "", 
 
      "M": "", 
 
      "N": "", 
 
      "O": "" 
 
     } 
 
    ]}; 
 

 
var dictionaryData = dataObj["1"]; 
 

 
for (var i in dictionaryData) { 
 
    var table = document.getElementById("apps"); 
 
    var tr = document.createElement("tr"); 
 
    var td = document.createElement("td"); 
 
    
 
    for (var key in dictionaryData[i]) { 
 
    var txt = document.createTextNode(key); 
 
    td.appendChild(txt); 
 
    tr.appendChild(td); 
 
    } 
 
    table.appendChild(tr); 
 
}

table, td { 
 
    border: 1px solid black; 
 
}

<div> 
 
    <table id="apps"></table> 
 
</div>

Answer 2

Ich kenne Ihre Anforderungen für das Projekt nicht, aber ich würde alle Probleme überspringen und eine Bibliothek wie DataTables verwenden. Es gibt viele Möglichkeiten, eine Tabelle aus AJAX oder anderen data sources zu füllen. Auch wenn es Ihnen nicht möglich ist, mit der Tabellendatenquelle zu experimentieren, um ihre Standards zu erfüllen, gibt es eine method Neuformatierung.

Answer 3

Ihre Frage lautet: "Was ist besser: die Tabellenzeile und die Zell-Tags bereits im Markup enthalten oder sie erstellen, wenn ich Daten erhalte?"

Ich würde sagen, die bessere Option ist, die Daten zu erstellen, wie Sie die Objekte erhalten.

In pseduocode:

for each object in 1 
    make new row <tr></tr> 

    for each data in object 
    make new cell <td></td> 
    insert data into <td>[here]</td> 
    insert cell into <tr>[here]</tr> 

    insert filled row into "apps" by using it's ID 
done 

Hat diese ausreichen für das, was Sie wissen wollten?

Answer 4

prüfen diese Demo:

var jsonResponse = { 
 
    "1": [{ 
 
      "A": "", 
 
      "B": "", 
 
      "C": "", 
 
      "D": "", 
 
      "E": "" 
 
     }, 
 
     { 
 
      "F": "", 
 
      "G": "", 
 
      "H": "", 
 
      "I": "", 
 
      "J": "" 
 
     } 
 
    ], 
 
    "2": [{ 
 
      "K": "", 
 
      "L": "", 
 
      "M": "", 
 
      "N": "", 
 
      "O": "" 
 
     }, 
 
     { 
 
      "P": "", 
 
      "Q": "", 
 
      "R": "", 
 
      "S": "", 
 
      "T": "" 
 
     } 
 
    ] 
 
}; 
 

 
$.each(jsonResponse, function(outerKey, list) { 
 
    var row = $('<tr>', { 
 
     id: 'row_' + outerKey 
 
    }); 
 
    $.each(list, function(innerKey, value) { 
 
     for (var key in value) { 
 
      var col = $('<td>', { 
 
       id: key, 
 
       text: key 
 
      }) 
 
      row.append(col); 
 
     } 
 
    }); 
 
    $('#apps').append(row); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <table id="apps"></table> 
 
</div>