将json数据转换为html表

Question

将json数据转换为html表是否有任何jQuery或javascript库生成给定JSON数据的动态表？我不想定义列，库应该读取json散列中的键并生成列。当然，我自己也可以遍历json数据并生成html表。我只想知道是否存在这样的库，我可以简单地重用。

Answer 1

我用vanillajs重写了您的代码，使用DOM方法来防止html注入。

演示

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;

}

document.body.appendChild(buildHtmlTable([{

    "name": "abc",

    "age": 50

  },

  {

    "age": "25",

    "hobby": "swimming"

  },

  {

    "name": "xyz",

    "hobby": "programming"

  }

]));