[javascript] JSON-Daten in eine HTML-Tabelle konvertieren



Answers

Ich habe Ihren Code in vanilla-js umgeschrieben, indem Sie DOM-Methoden verwenden, um die HTML-Injektion zu verhindern.

Demo

var _table_ = document.createElement('table'),
    _tr_ = document.createElement('tr'),
    _th_ = document.createElement('th'),
    _td_ = document.createElement('td');

// Builds the HTML Table out of myList json data from Ivy restful service.
 function buildHtmlTable(arr) {
     var table = _table_.cloneNode(false),
         columns = addAllColumnHeaders(arr, table);
     for (var i=0, maxi=arr.length; i < maxi; ++i) {
         var tr = _tr_.cloneNode(false);
         for (var j=0, maxj=columns.length; j < maxj ; ++j) {
             var td = _td_.cloneNode(false);
                 cellValue = arr[i][columns[j]];
             td.appendChild(document.createTextNode(arr[i][columns[j]] || ''));
             tr.appendChild(td);
         }
         table.appendChild(tr);
     }
     return table;
 }

 // 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(arr, table)
 {
     var columnSet = [],
         tr = _tr_.cloneNode(false);
     for (var i=0, l=arr.length; i < l; i++) {
         for (var key in arr[i]) {
             if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key)===-1) {
                 columnSet.push(key);
                 var th = _th_.cloneNode(false);
                 th.appendChild(document.createTextNode(key));
                 tr.appendChild(th);
             }
         }
     }
     table.appendChild(tr);
     return columnSet;
 }
Question

Gibt es eine jQuery- oder Javascript-Bibliothek, die eine dynamische Tabelle mit JSON-Daten generiert? Ich möchte die Spalten nicht definieren, die Bibliothek sollte die Schlüssel im json-Hash lesen und Spalten generieren.

Natürlich kann ich selbst die json-Daten durchlaufen und die html-Tabelle generieren. Ich möchte nur wissen, ob eine solche Bibliothek existiert, die ich einfach wiederverwenden kann.




JSON2HTML Sie sich JSON2HTML http://json2html.com/ plugin für jQuery an. Sie können eine Transformation angeben, die Ihr JSON-Objekt in eine HTML-Vorlage konvertiert. Verwenden Sie den Builder unter http://json2html.com/ , um das Json-Transformationsobjekt für eine beliebige HTML-Vorlage zu erhalten. In Ihrem Fall wäre es eine Tabelle mit einer Zeile mit folgender Transformation.

Beispiel:

var transform = {"tag":"table", "children":[
    {"tag":"tbody","children":[
        {"tag":"tr","children":[
            {"tag":"td","html":"${name}"},
            {"tag":"td","html":"${age}"}
        ]}
    ]}
]};

var data = [
    {'name':'Bob','age':40},
    {'name':'Frank','age':15},
    {'name':'Bill','age':65},
    {'name':'Robert','age':24}
];

$('#target_div').html(json2html.transform(data,transform));



Links