it-swarm.com.de

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

Gibt es eine wirklich einfache Möglichkeit, ein Array von JSON-Objekten in eine HTML-Tabelle zu konvertieren, mit Ausnahme einiger Felder? Oder muss ich das manuell machen?

73
Josh Stodola

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

33
Daniel Moura

Mit jQuery wird dies einfacher.

Im Folgenden wird ein Array von Arrays verwendet und gespeichert und in Zeilen und Zellen umgewandelt.

$.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 Überprüfung für die Schlüssel hinzufügen, die Sie ausschließen möchten, indem Sie etwas hinzufügen

var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };

am Anfang des getJSON cbf und Hinzufügen

if ( ( k in expected_keys ) && expected_keys[k] ) {
...
}

um die Zeile tbl_row + =.

Bearbeiten: Wurde zuvor eine Nullvariable zugewiesen

Edit: Version basierend auf Timmmm 's Injektionsfreier 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").appendChild(tbl_body);
});
75
avatastic

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

13
Dr.sai

Reiner HTML-Weg, 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);
}

Verwendungsbeispiel:

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

Konvertieren eines 2D-JavaScript-Arrays in eine HTML-Tabelle

Um ein 2D-JavaScript-Array in eine HTML-Tabelle umzuwandeln, benötigen Sie wirklich etwas 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 auch etwas Ajax-Code:

$.ajax({
    type: "GET",
    url: "data.json",
    dataType: 'json',
    success: function (data) {
        $('body').append(arrayToTable(data));
    }
});
6
John Slegers

Für sehr erweiterte JSON-Objekte in HTML-Tabellen können Sie Meine jQuery-Lösung versuchen, die 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;
}
5
Xelights

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

2
Omkar Khair

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>
1
Penny Liu

Ich habe hier ein Duplikat gefunden: Json-Daten in eine HTML-Tabelle konvertieren

Nun, es gibt viele Plugins, einschließlich kommerziellen (Machen Sie dies zu einem kommerziellen Projekt ?! Ein bisschen übertrieben ... aber Sie können hier drüber schauen: https://github.com/alfajango/jquery-dynatable

Dieser hat mehr Fork: 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');

Vielleicht möchten Sie auch diese jQuery-Plugins überprüfen: https://github.com/jongha/jquery-jsontotable

Ich denke, dass die Plugins von Jongha einfacher zu benutzen sind

<div id="jsontotable" class="jsontotable"></div>

var data = [[1, 2, 3], [1, 2, 3]];
$.jsontotable(data, { id: '#jsontotable', header: false });
1
Weijing Jay Lin

Mit Javascript + JQuery können Sie dies ganz einfach tun (siehe unten). 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>
1
Divvya Mehta

Wenn Sie die Verwendung eines anderen von jQuery abhängigen Tools akzeptieren, würde ich die Verwendung von Tabulator empfehlen. Dann müssen Sie keinen HTML- oder anderen DOM-generierenden Code schreiben, während Sie bei der Formatierung und Verarbeitung der Tabellendaten große Flexibilität beibehalten. 

 enter image description here

Für ein weiteres Arbeitsbeispiel mit Node können Sie sich das MMM-Tabulator -Demo-Projekt ansehen.

0
not2qubit

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

Hoffen Sie, dass dies hilfreich ist, um auch einige Spalten auszublenden . Link zur Datei

0
Priya

Pivotierte einzeilige Ansicht mit Kopfzeilen auf der linken Seite basierend auf der Antwort von @ Dr.sai oben.

Injektion 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));
};
0
glyph