Konvertieren Sie das JSON-Array in eine HTML-Tabelle in jQuery

80

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?

Josh Stodola
quelle

Antworten:

37

Ich bin nicht sicher, ob Sie das wollen, aber es gibt jqGrid . Es kann JSON empfangen und ein Raster erstellen.

Daniel Moura
quelle
Eine weitere Abstimmung für jqGrid - wirklich einfach zu implementieren, mit großartigen Dokumentationen und Beispielen ausgestattet und reduziert einen Großteil der Arbeit für Sie.
Peter Bailey
jqGrid sieht sehr vielversprechend aus!
Charlie Vieillard
3
Beachten Sie, dass jqGrid ein kommerzielles Produkt mit nicht trivialen Lizenzkosten ist.
simpleuser
83

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
});
avatastisch
quelle
Es fällt mir schwer, die Reihenfolge der Spalten zu kontrollieren
Nathan H
Hab das gerade gesehen. Wie würde ich es so schreiben, dass ich <tr>abwechselnd eine Klasse von gerade oder ungerade habe?
Monica
Die Reihenfolge der Spalten hängt von der Reihenfolge ab, in der sie in den Quelldaten angezeigt werden. Ich habe dem OP eine einfache ungerade / gerade Lichtmaschine hinzugefügt.
Avatastic
5
Beachten Sie, dass dies für die Skriptinjektion anfällig ist. Dh nicht mit benutzergenerierten Inhalten verwenden.
Timmmm
7
Sie sollten $ ("# target_table_id") verwenden. Append (tbl_body); anstelle von $ ("# target_table_id"). appendChild (tbl_body); da das jQuery-Objekt nur eine Append-Funktion verfügbar macht.
BornToCode
14

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

Dr.sai
quelle
9

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);
});
Timmmm
quelle
7

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));
    }
});
John Slegers
quelle
5

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;
}
Xelights
quelle
2

Sie können ein jQuery-Plugin verwenden, das JSON-Daten akzeptiert, um eine Tabelle zu füllen. jsonTable

Omkar Khair
quelle
2

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 });
Weijing Jay Lin
quelle
2

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.

Geben Sie hier die Bildbeschreibung ein

Ein weiteres Arbeitsbeispiel mit Node finden Sie im MMM-Tabulator-Demoprojekt .

not2qubit
quelle
1

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);
    }
});
Numan KIZILIRMAK
quelle
1

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>

Divvya Mehta
quelle
1

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>

Penny Liu
quelle
0

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

Priya
quelle
0

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));
};
Glyphe
quelle
-1

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"));
        };
Dr.sai
quelle
Anfällig für HTML / Skript-Injection.
Timmmm