Gibt es eine wirklich einfache Möglichkeit, ein Array von JSON-Objekten in eine HTML-Tabelle umzuwandeln, mit Ausnahme einiger Felder? Oder muss ich das manuell machen?
javascript
jquery
json
ajax
html-table
Josh Stodola
quelle
quelle
Die Verwendung von jQuery vereinfacht dies.
Der folgende Code nimmt ein Array von Arrays und speichert sie in Zeilen und Zellen.
$.getJSON(url , function(data) { var tbl_body = ""; var odd_even = false; $.each(data, function() { var tbl_row = ""; $.each(this, function(k , v) { tbl_row += "<td>"+v+"</td>"; }); tbl_body += "<tr class=\""+( odd_even ? "odd" : "even")+"\">"+tbl_row+"</tr>"; odd_even = !odd_even; }); $("#target_table_id tbody").html(tbl_body); });
Sie können eine Prüfung für die Schlüssel hinzufügen, die Sie ausschließen möchten, indem Sie etwas wie hinzufügen
var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };
zu Beginn der getJSON-Rückruffunktion und Hinzufügen von:
if ( ( k in expected_keys ) && expected_keys[k] ) { ... }
um die Zeile tbl_row + =.
Bearbeiten: Wurde zuvor eine Nullvariable zugewiesen
Edit: Version basiert auf Timmmm ‚s spritzfreien Beitrag.
$.getJSON(url , function(data) { var tbl_body = document.createElement("tbody"); var odd_even = false; $.each(data, function() { var tbl_row = tbl_body.insertRow(); tbl_row.className = odd_even ? "odd" : "even"; $.each(this, function(k , v) { var cell = tbl_row.insertCell(); cell.appendChild(document.createTextNode(v.toString())); }); odd_even = !odd_even; }); $("#target_table_id").append(tbl_body); //DOM table doesn't have .appendChild });
quelle
<tr>
abwechselnd eine Klasse von gerade oder ungerade habe?Erstellen Sie eine HTML-Tabelle aus einem JSON-Array von Objekten, indem Sie $ wie unten gezeigt erweitern
$.makeTable = function (mydata) { var table = $('<table border=1>'); var tblHeader = "<tr>"; for (var k in mydata[0]) tblHeader += "<th>" + k + "</th>"; tblHeader += "</tr>"; $(tblHeader).appendTo(table); $.each(mydata, function (index, value) { var TableRow = "<tr>"; $.each(value, function (key, val) { TableRow += "<td>" + val + "</td>"; }); TableRow += "</tr>"; $(table).append(TableRow); }); return ($(table)); };
und wie folgt verwenden:
var mydata = eval(jdata); var table = $.makeTable(mydata); $(table).appendTo("#TableCont");
wo TableCont ist ein div
quelle
Reine HTML-Art, nicht anfällig wie die anderen AFAIK:
// Function to create a table as a child of el. // data must be an array of arrays (outer array is rows). function tableCreate(el, data) { var tbl = document.createElement("table"); tbl.style.width = "70%"; for (var i = 0; i < data.length; ++i) { var tr = tbl.insertRow(); for(var j = 0; j < data[i].length; ++j) { var td = tr.insertCell(); td.appendChild(document.createTextNode(data[i][j].toString())); } } el.appendChild(tbl); }
Anwendungsbeispiel:
$.post("/whatever", { somedata: "test" }, null, "json") .done(function(data) { rows = []; for (var i = 0; i < data.Results.length; ++i) { cells = []; cells.push(data.Results[i].A); cells.push(data.Results[i].B); rows.push(cells); } tableCreate($("#results")[0], rows); });
quelle
Konvertieren eines 2D-JavaScript-Arrays in eine HTML-Tabelle
Um ein 2D-JavaScript-Array in eine HTML-Tabelle umzuwandeln, benötigen Sie wirklich nur ein wenig Code:
function arrayToTable(tableData) { var table = $('<table></table>'); $(tableData).each(function (i, rowData) { var row = $('<tr></tr>'); $(rowData).each(function (j, cellData) { row.append($('<td>'+cellData+'</td>')); }); table.append(row); }); return table; } $('body').append(arrayToTable([ ["John","Slegers",34], ["Tom","Stevens",25], ["An","Davies",28], ["Miet","Hansen",42], ["Eli","Morris",18] ]));
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Laden einer JSON-Datei
Wenn Sie Ihr 2D-Array aus einer JSON-Datei laden möchten, benötigen Sie außerdem ein wenig Ajax-Code:
$.ajax({ type: "GET", url: "data.json", dataType: 'json', success: function (data) { $('body').append(arrayToTable(data)); } });
quelle
Für sehr fortgeschrittene JSON-Objekte in HTML-Tabellen können Sie My jQuery Solution ausprobieren , das auf diesem geschlossenen Thread basiert .
var myList=[{"name": "abc","age": 50},{"name": {"1": "piet","2": "jan","3": "klaas"},"age": "25","hobby": "watching tv"},{"name": "xyz","hobby": "programming","subtable": [{"a": "a","b": "b"},{"a": "a","b": "b"}]}]; // Builds the HTML Table out of myList json data from Ivy restful service. function buildHtmlTable() { addTable(myList, $("#excelDataTable")); } function addTable(list, appendObj) { var columns = addAllColumnHeaders(list, appendObj); for (var i = 0; i < list.length; i++) { var row$ = $('<tr/>'); for (var colIndex = 0; colIndex < columns.length; colIndex++) { var cellValue = list[i][columns[colIndex]]; if (cellValue == null) { cellValue = ""; } if (cellValue.constructor === Array) { $a = $('<td/>'); row$.append($a); addTable(cellValue, $a); } else if (cellValue.constructor === Object) { var array = $.map(cellValue, function (value, index) { return [value]; }); $a = $('<td/>'); row$.append($a); addObject(array, $a); } else { row$.append($('<td/>').html(cellValue)); } } appendObj.append(row$); } } function addObject(list, appendObj) { for (var i = 0; i < list.length; i++) { var row$ = $('<tr/>'); var cellValue = list[i]; if (cellValue == null) { cellValue = ""; } if (cellValue.constructor === Array) { $a = $('<td/>'); row$.append($a); addTable(cellValue, $a); } else if (cellValue.constructor === Object) { var array = $.map(cellValue, function (value, index) { return [value]; }); $a = $('<td/>'); row$.append($a); addObject(array, $a); } else { row$.append($('<td/>').html(cellValue)); } appendObj.append(row$); } } // Adds a header row to the table and returns the set of columns. // Need to do union of keys from all records as some records may not contain // all records function addAllColumnHeaders(list, appendObj) { var columnSet = []; var headerTr$ = $('<tr/>'); for (var i = 0; i < list.length; i++) { var rowHash = list[i]; for (var key in rowHash) { if ($.inArray(key, columnSet) == -1) { columnSet.push(key); headerTr$.append($('<th/>').html(key)); } } } appendObj.append(headerTr$); return columnSet; }
quelle
Sie können ein jQuery-Plugin verwenden, das JSON-Daten akzeptiert, um eine Tabelle zu füllen. jsonTable
quelle
Ich habe hier ein Duplikat gefunden: Konvertieren Sie JSON-Daten in eine HTML-Tabelle
Nun, es gibt viele Plugins, einschließlich eines kommerziellen (Machen Sie dies als kommerzielles Projekt?! Etwas übertrieben ... aber Sie können hier nachschauen : https://github.com/alfajango/jquery-dynatable )
Dieser hat mehr Gabel: https://github.com/afshinm/Json-to-HTML-Table
//Example data, Object var objectArray = [{ "Total": "34", "Version": "1.0.4", "Office": "New York" }, { "Total": "67", "Version": "1.1.0", "Office": "Paris" }]; //Example data, Array var stringArray = ["New York", "Berlin", "Paris", "Marrakech", "Moscow"]; //Example data, nested Object. This data will create nested table also. var nestedTable = [{ key1: "val1", key2: "val2", key3: { tableId: "tblIdNested1", tableClassName: "clsNested", linkText: "Download", data: [{ subkey1: "subval1", subkey2: "subval2", subkey3: "subval3" }] } }];
Wenden Sie den Code an
//Only first parameter is required var jsonHtmlTable = ConvertJsonToTable(objectArray, 'jsonTable', null, 'Download');
Oder Sie möchten auch diese jQuery-Plugins überprüfen: https://github.com/jongha/jquery-jsontotable
Ich denke, Jonghas Plugins sind einfacher zu bedienen
<div id="jsontotable" class="jsontotable"></div> var data = [[1, 2, 3], [1, 2, 3]]; $.jsontotable(data, { id: '#jsontotable', header: false });
quelle
Wenn Sie die Verwendung eines anderen jQuery- abhängigen Tools akzeptieren , würde ich die Verwendung von Tabulator empfehlen . Dann müssen Sie weder HTML noch anderen DOM-generierenden Code schreiben, während Sie hinsichtlich der Formatierung und Verarbeitung der Tabellendaten sehr flexibel bleiben.
Ein weiteres Arbeitsbeispiel mit Node finden Sie im MMM-Tabulator-Demoprojekt .
quelle
mit reinem jquery:
window.jQuery.ajax({ type: "POST", url: ajaxUrl, contentType: 'application/json', success: function (data) { var odd_even = false; var response = JSON.parse(data); var head = "<thead class='thead-inverse'><tr>"; $.each(response[0], function (k, v) { head = head + "<th scope='row'>" + k.toString() + "</th>"; }) head = head + "</thead></tr>"; $(table).append(head);//append header var body="<tbody><tr>"; $.each(response, function () { body=body+"<tr>"; $.each(this, function (k, v) { body=body +"<td>"+v.toString()+"</td>"; }) body=body+"</tr>"; }) body=body +"</tbody>"; $(table).append(body);//append body }, error: function (xhr, ajaxOptions, thrownError) { alert(xhr.responsetext); } });
quelle
Sie können dies ziemlich einfach mit Javascript + Jquery wie unten tun. Wenn Sie eine Spalte ausschließen möchten, schreiben Sie einfach eine if-Anweisung in die for-Schleifen, um diese Spalten zu überspringen. Hoffe das hilft!
//Sample JSON 2D array var json = [{ "Total": "34", "Version": "1.0.4", "Office": "New York" }, { "Total": "67", "Version": "1.1.0", "Office": "Paris" }]; // Get Table headers and print for (var k = 0; k < Object.keys(json[0]).length; k++) { $('#table_head').append('<td>' + Object.keys(json[0])[k] + '</td>'); } // Get table body and print for (var i = 0; i < Object.keys(json).length; i++) { $('#table_content').append('<tr>'); for (var j = 0; j < Object.keys(json[0]).length; j++) { $('#table_content').append('<td>' + json[i][Object.keys(json[0])[j]] + '</td>'); } $('#table_content').append('</tr>'); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <thead> <tr id="table_head"> </tr> </thead> <tbody id="table_content"> </tbody> </table>
quelle
Ein einfacher Weg, dies zu tun, ist:
var data = [{ "Total": 34, "Version": "1.0.4", "Office": "New York" }, { "Total": 67, "Version": "1.1.0", "Office": "Paris" }]; drawTable(data); function drawTable(data) { // Get Table headers and print var head = $("<tr />") $("#DataTable").append(head); for (var j = 0; j < Object.keys(data[0]).length; j++) { head.append($("<th>" + Object.keys(data[0])[j] + "</th>")); } // Print the content of rows in DataTable for (var i = 0; i < data.length; i++) { drawRow(data[i]); } } function drawRow(rowData) { var row = $("<tr />") $("#DataTable").append(row); row.append($("<td>" + rowData["Total"] + "</td>")); row.append($("<td>" + rowData["Version"] + "</td>")); row.append($("<td>" + rowData["Office"] + "</td>")); }
table { border: 1px solid #666; width: 100%; text-align: center; } th { background: #f8f8f8; font-weight: bold; padding: 2px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="DataTable"></table>
quelle
Ein Bitcode von @ Dr.sais Code wurde geändert. Hoffe das wird nützlich sein.
(function ($) { /** * data - array of record * hidecolumns, array of fields to hide * usage : $("selector").generateTable(json, ['field1', 'field5']); */ 'use strict'; $.fn.generateTable = function (data, hidecolumns) { if ($.isArray(data) === false) { console.log('Invalid Data'); return; } var container = $(this), table = $('<table>'), tableHead = $('<thead>'), tableBody = $('<tbody>'), tblHeaderRow = $('<tr>'); $.each(data, function (index, value) { var tableRow = $('<tr>').addClass(index%2 === 0 ? 'even' : 'odd'); $.each(value, function (key, val) { if (index == 0 && $.inArray(key, hidecolumns) <= -1 ) { var theaddata = $('<th>').text(key); tblHeaderRow.append(theaddata); } if ($.inArray(key, hidecolumns) <= -1 ) { var tbodydata = $('<td>').text(val); tableRow.append(tbodydata); } }); $(tableBody).append(tableRow); }); $(tblHeaderRow).appendTo(tableHead); tableHead.appendTo(table); tableBody.appendTo(table); $(this).append(table); return this; }; })(jQuery);
In der Hoffnung, dass dies hilfreich ist, um auch einige Spalten auszublenden. Link zur Datei
quelle
Schwenkbare einzeilige Ansicht mit Überschriften auf der linken Seite basierend auf der obigen Antwort von @ Dr.sai.
Die Injektion wird durch die .text-Methode von jQuery verhindert
$.makeTable = function (mydata) { var table = $('<table>'); $.each(mydata, function (index, value) { // console.log('index '+index+' value '+value); $(table).append($('<tr>')); $(table).append($('<th>').text(index)); $(table).append($('<td>').text(value)); }); return ($(table)); };
quelle
Ein noch kürzerer Weg
$.makeTable = function (mydata) { if (mydata.length <= 0) return ""; return $('<table border=1>').append("<tr>" + $.map(mydata[0], function (val, key) { return "<th>" + key + "</th>"; }).join("\n") + "</tr>").append($.map(mydata, function (index, value) { return "<tr>" + $.map(index, function (val, key) { return "<td>" + val + "</td>"; }).join("\n") + "</tr>"; }).join("\n")); };
quelle