Convert json data to a html table

Question

Is there any jQuery or javascript library that generates a dynamic table given json data  I don t want to define the columns  the library should read the keys in the json hash and generate columns   Of course  I can myself iterate through the json data and generate the html table  I just want to know if any such library exists which I can simply reuse

User · Answer

I have rewritten your code in vanilla-js, using DOM methods to prevent html injection.

Demo

_x000D_

var _table_ = document.createElement('table'),_x000D_
  _tr_ = document.createElement('tr'),_x000D_
  _th_ = document.createElement('th'),_x000D_
  _td_ = document.createElement('td');_x000D_
_x000D_
// Builds the HTML Table out of myList json data from Ivy restful service._x000D_
function buildHtmlTable(arr) {_x000D_
  var table = _table_.cloneNode(false),_x000D_
    columns = addAllColumnHeaders(arr, table);_x000D_
  for (var i = 0, maxi = arr.length; i < maxi; ++i) {_x000D_
    var tr = _tr_.cloneNode(false);_x000D_
    for (var j = 0, maxj = columns.length; j < maxj; ++j) {_x000D_
      var td = _td_.cloneNode(false);_x000D_
      cellValue = arr[i][columns[j]];_x000D_
      td.appendChild(document.createTextNode(arr[i][columns[j]] || ''));_x000D_
      tr.appendChild(td);_x000D_
    }_x000D_
    table.appendChild(tr);_x000D_
  }_x000D_
  return table;_x000D_
}_x000D_
_x000D_
// Adds a header row to the table and returns the set of columns._x000D_
// Need to do union of keys from all records as some records may not contain_x000D_
// all records_x000D_
function addAllColumnHeaders(arr, table) {_x000D_
  var columnSet = [],_x000D_
    tr = _tr_.cloneNode(false);_x000D_
  for (var i = 0, l = arr.length; i < l; i++) {_x000D_
    for (var key in arr[i]) {_x000D_
      if (arr[i].hasOwnProperty(key) && columnSet.indexOf(key) === -1) {_x000D_
        columnSet.push(key);_x000D_
        var th = _th_.cloneNode(false);_x000D_
        th.appendChild(document.createTextNode(key));_x000D_
        tr.appendChild(th);_x000D_
      }_x000D_
    }_x000D_
  }_x000D_
  table.appendChild(tr);_x000D_
  return columnSet;_x000D_
}_x000D_
_x000D_
document.body.appendChild(buildHtmlTable([{_x000D_
    "name": "abc",_x000D_
    "age": 50_x000D_
  },_x000D_
  {_x000D_
    "age": "25",_x000D_
    "hobby": "swimming"_x000D_
  },_x000D_
  {_x000D_
    "name": "xyz",_x000D_
    "hobby": "programming"_x000D_
  }_x000D_
]));

_x000D_

User · Answer

Thanks all for your replies  I wrote one myself  Please note that this uses jQuery   Code snippet   x000D   x000D  var myList     x000D       name    abc    age   50    x000D       age    25    hobby    swimming     x000D       name    xyz    hobby    programming    x000D     x000D   x000D     Builds the HTML Table out of myList  x000D  function buildHtmlTable selector    x000D    var columns   addAllColumnHeaders myList  selector   x000D   x000D    for  var i   0  i  lt  myList length  i      x000D      var row        lt tr  gt     x000D      for  var colIndex   0  colIndex  lt  columns length  colIndex      x000D        var cellValue   myList i  columns colIndex    x000D        if  cellValue    null  cellValue       x000D        row  append     lt td  gt    html cellValue    x000D        x000D        selector  append row    x000D      x000D    x000D   x000D     Adds a header row to the table and returns the set of columns  x000D     Need to do union of keys from all records as some records may not contain x000D     all records  x000D  function addAllColumnHeaders myList  selector    x000D    var columnSet       x000D    var headerTr        lt tr  gt     x000D   x000D    for  var i   0  i  lt  myList length  i      x000D      var rowHash   myList i   x000D      for  var key in rowHash    x000D        if    inArray key  columnSet     -1    x000D          columnSet push key   x000D          headerTr  append     lt th  gt    html key    x000D          x000D        x000D      x000D      selector  append headerTr    x000D   x000D    return columnSet  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt body onLoad  buildHtmlTable   excelDataTable    gt  x000D     lt table id  excelDataTable  border  1  gt  x000D     lt  table gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

You can use simple jQuery jPut plugin  http   plugins jquery com jput    lt script gt    document  ready function     var json      name    name1   email   email1 domain com     name    name2   link   email2 domain com       while running this code the template will be appended in your div with json data     tbody   jPut       jsonData json        ajax url  youfile json    if you want to call from a json file     name  tbody template             lt  script gt       lt table jput  t template  gt    lt tbody jput  tbody template  gt        lt tr gt            lt td gt   name   lt  td gt            lt td gt   email   lt  td gt        lt  tr gt    lt  tbody gt   lt  table gt    lt table gt    lt tbody id  tbody  gt    lt  tbody gt   lt  table gt

User · Answer

Check out JSON2HTML http   json2html com  plugin for jQuery  It allows you to specify a transform that would convert your JSON object to HTML template  Use builder on http   json2html com  to get json transform object for any desired html template  In your case  it would be a table with row having following transform   Example    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

[javascript] Convert json data to a html table

Examples related to javascript

Examples related to html

Examples related to json

Examples related to html-table