Convert JSON array to an HTML table in jQuery

Question

Is there a really easy way I can take an array of JSON objects and turn it into an HTML table  excluding a few fields   Or am I going to have to do this manually

User · Answer

You can do this pretty easily with Javascript+Jquery as below. If you want to exclude some column, just write an if statement inside the for loops to skip those columns. Hope this helps!

_x000D_

//Sample JSON 2D array_x000D_
var json = [{_x000D_
  "Total": "34",_x000D_
  "Version": "1.0.4",_x000D_
  "Office": "New York"_x000D_
}, {_x000D_
  "Total": "67",_x000D_
  "Version": "1.1.0",_x000D_
  "Office": "Paris"_x000D_
}];_x000D_
_x000D_
// Get Table headers and print_x000D_
for (var k = 0; k < Object.keys(json[0]).length; k++) {_x000D_
  $('#table_head').append('<td>' + Object.keys(json[0])[k] + '</td>');_x000D_
}_x000D_
_x000D_
// Get table body and print_x000D_
for (var i = 0; i < Object.keys(json).length; i++) {_x000D_
  $('#table_content').append('<tr>');_x000D_
  for (var j = 0; j < Object.keys(json[0]).length; j++) {_x000D_
    $('#table_content').append('<td>' + json[i][Object.keys(json[0])[j]] + '</td>');_x000D_
  }_x000D_
  $('#table_content').append('</tr>');_x000D_
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>_x000D_
<table>_x000D_
  <thead>_x000D_
    <tr id="table_head">_x000D_
_x000D_
    </tr>_x000D_
  </thead>_x000D_
  <tbody id="table_content">_x000D_
_x000D_
  </tbody>_x000D_
</table>

_x000D_

User · Answer

A still shorter way    makeTable   function  mydata                if  mydata length  lt   0  return                return     lt table border 1 gt    append   lt tr gt       map mydata 0   function  val  key                    return   lt th gt     key     lt  th gt                   join   n       lt  tr gt    append   map mydata  function  index  value                    return   lt tr gt       map index  function  val  key                        return   lt td gt     val     lt  td gt                       join   n       lt  tr gt                   join   n

User · Answer

Pivoted single-row view with headers on the left based on  Dr sai s  answer above   Injection prevented by jQuery s  text method    makeTable   function  mydata        var table       lt table gt           each mydata  function  index  value               console log  index   index   value   value             table  append     lt tr gt                table  append     lt th gt    text index              table  append     lt td gt    text value                return    table

User · Answer

Modified a bit code of  Dr sai  s code  Hope this will be useful    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       lt table gt                 tableHead       lt thead gt                        tableBody       lt tbody gt                        tblHeaderRow       lt tr gt                       each data  function  index  value                var tableRow       lt tr gt    addClass index 2     0    even     odd                        each value  function  key  val                    if  index    0  amp  amp    inArray key  hidecolumns   lt   -1                          var theaddata       lt th gt    text key                       tblHeaderRow append theaddata                                      if    inArray key  hidecolumns   lt   -1                          var tbodydata       lt td gt    text val                       tableRow append tbodydata                                                        tableBody  append tableRow                           tblHeaderRow  appendTo tableHead           tableHead appendTo table                 tableBody appendTo table             this  append table               return this            jQuery     Hoping this will be helpful to hide some columns too  Link to file

User · Answer

For very advanced JSON objects to HTML tables you can try My jQuery Solution that is based on this closed thread   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  lt  list length  i              var row        lt tr  gt             for  var colIndex   0  colIndex  lt  columns length  colIndex                  var cellValue   list i  columns colIndex                 if  cellValue    null                    cellValue                                  if  cellValue constructor     Array                                 a       lt td  gt                     row  append  a                   addTable cellValue   a                  else if  cellValue constructor     Object                                 var array     map cellValue  function  value  index                        return  value                                         a       lt td  gt                     row  append  a                   addObject array   a                  else                   row  append     lt td  gt    html cellValue                                    appendObj append row              function addObject list  appendObj        for  var i   0  i  lt  list length  i              var row        lt tr  gt              var cellValue   list i            if  cellValue    null                cellValue                          if  cellValue constructor     Array                         a       lt td  gt                 row  append  a               addTable cellValue   a              else if  cellValue constructor     Object                         var array     map cellValue  function  value  index                    return  value                                 a       lt td  gt                 row  append  a               addObject array   a              else               row  append     lt td  gt    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        lt tr  gt          for  var i   0  i  lt  list length  i              var rowHash   list i           for  var key in rowHash                if    inArray key  columnSet     -1                    columnSet push key                   headerTr  append     lt th  gt    html key                                      appendObj append headerTr         return columnSet

User · Answer

Make a HTML Table from a JSON array of Objects by extending   as shown below     makeTable   function  mydata        var table       lt table border 1 gt         var tblHeader     lt tr gt        for  var k in mydata 0   tblHeader      lt th gt     k     lt  th gt        tblHeader      lt  tr gt          tblHeader  appendTo table         each mydata  function  index  value            var TableRow     lt tr gt              each value  function  key  val                TableRow      lt td gt     val     lt  td gt                        TableRow      lt  tr gt              table  append TableRow               return    table         and use as follows   var mydata   eval jdata   var table     makeTable mydata     table  appendTo   TableCont      where TableCont is some div

User · Answer

Using jQuery will make this simpler   The following code will take an array of arrays and store convert them into rows and cells     getJSON url   function data        var tbl body           var odd even   false        each data  function             var tbl row                 each this  function k   v                tbl row      lt td gt   v   lt  td gt                        tbl body      lt tr class       odd even    odd     even       gt   tbl row   lt  tr gt            odd even    odd even                                 target table id tbody   html tbl body         You could add a check for the keys you want to exclude by adding something like  var expected keys     key 1   true  key 2   true  key 3   false  key 4   true      at the start of the getJSON callback function and adding   if     k in expected keys    amp  amp  expected keys k              around the tbl row    line   Edit  Was assigning a null variable previously  Edit  Version based on Timmmm s injection-free contribution     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

User · Answer

You could use a jQuery plugin that accepts JSON data to fill a table  jsonTable

User · Answer

Pure HTML way  not vulnerable like the others 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  lt  data length    i                var tr   tbl insertRow            for var j   0  j  lt  data i  length    j                        var td   tr insertCell                td appendChild document createTextNode data i  j  toString                          el appendChild tbl       Example usage     post   whatever     somedata   test     null   json    done function data        rows           for  var i   0  i  lt  data Results length    i                cells               cells push data Results i  A           cells push data Results i  B           rows push cells             tableCreate     results   0   rows

User · Answer

Converting a 2D JavaScript array to an HTML table  To turn a 2D JavaScript array into an HTML table  you really need but a little bit of code     x000D   x000D  function arrayToTable tableData    x000D      var table       lt table gt  lt  table gt     x000D        tableData  each function  i  rowData    x000D          var row       lt tr gt  lt  tr gt     x000D            rowData  each function  j  cellData    x000D              row append     lt td gt   cellData   lt  td gt      x000D              x000D          table append row   x000D          x000D      return table  x000D    x000D   x000D     body   append arrayToTable   x000D        John   Slegers  34   x000D        Tom   Stevens  25   x000D        An   Davies  28   x000D        Miet   Hansen  42   x000D        Eli   Morris  18  x000D       x000D   lt script src  http   ajax googleapis com ajax libs jquery 1 7 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D      Loading a JSON file  If you want to load your 2D array from a JSON file  you ll also need a little bit of Ajax code      ajax       type   GET       url   data json       dataType   json       success  function  data               body   append arrayToTable data

User · Answer

I found a duplicate over here  Convert json data to a html table  Well  there are many plugins exists  including commercial one  Make this as commercial project   Kinda overdone    but you can checkout over here  https   github com alfajango jquery-dynatable   This one has more 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                         Apply the code    Only first parameter is required var jsonHtmlTable   ConvertJsonToTable objectArray   jsonTable   null   Download      Or you might want to checkout this jQuery plugins as well  https   github com jongha jquery-jsontotable  I think jongha s plugins is easier to use   lt div id  jsontotable  class  jsontotable  gt  lt  div gt   var data     1  2  3    1  2  3      jsontotable data    id    jsontotable   header  false

User · Answer

with pure 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     lt thead class  thead-inverse  gt  lt tr gt              each response 0   function  k  v                head   head     lt th scope  row  gt     k toString       lt  th gt                       head   head     lt  thead gt  lt  tr gt              table  append head    append header        var body   lt tbody gt  lt tr gt              each response  function                  body body   lt tr gt                  each this  function  k  v                    body body    lt td gt   v toString     lt  td gt                                                                        body body   lt  tr gt                                      body body    lt  tbody gt              table  append body    append body            error  function  xhr  ajaxOptions  thrownError            alert xhr responsetext

User · Answer

If you accept using another jQuery dependent tool  I would recommend using Tabulator  Then you will not need to write HTML or any other DOM generating code  while maintaining great flexibility regarding the formatting and processing of the table data      For another working example using Node  you can look at the MMM-Tabulator demo project

User · Answer

I m not sure if is this that you want but there is jqGrid  It can receive JSON and make a grid

User · Answer

One simple way of doing this is    x000D   x000D  var data      x000D     Total   34  x000D     Version    1 0 4   x000D     Office    New York  x000D       x000D     Total   67  x000D     Version    1 1 0   x000D     Office    Paris  x000D      x000D   x000D  drawTable data   x000D   x000D  function drawTable data    x000D   x000D       Get Table headers and print x000D    var head       lt tr   gt    x000D        DataTable   append head   x000D    for  var j   0  j  lt  Object keys data 0   length  j      x000D      head append     lt th gt     Object keys data 0   j      lt  th gt      x000D      x000D   x000D       Print the content of rows in DataTable x000D    for  var i   0  i  lt  data length  i      x000D      drawRow data i    x000D      x000D   x000D    x000D   x000D  function drawRow rowData    x000D    var row       lt tr   gt    x000D        DataTable   append row   x000D    row append     lt td gt     rowData  Total       lt  td gt      x000D    row append     lt td gt     rowData  Version       lt  td gt      x000D    row append     lt td gt     rowData  Office       lt  td gt      x000D    x000D  table   x000D    border  1px solid  666  x000D    width  100   x000D    text-align  center  x000D    x000D   x000D  th   x000D    background   f8f8f8  x000D    font-weight  bold  x000D    padding  2px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt table id  DataTable  gt  lt  table gt  x000D   x000D   x000D

[javascript] Convert JSON array to an HTML table in jQuery

Examples related to javascript

Examples related to jquery

Examples related to json

Examples related to ajax

Examples related to html-table