Search code examples
javascripthtmljsonhtml-table

Convert json data to a html table


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.


Solution

  • Thanks all for your replies. I wrote one myself. Please note that this uses jQuery.

    Code snippet:

    var myList = [
      { "name": "abc", "age": 50 },
      { "age": "25", "hobby": "swimming" },
      { "name": "xyz", "hobby": "programming" }
    ];
    
    // Builds the HTML Table out of myList.
    function buildHtmlTable(selector) {
      var columns = addAllColumnHeaders(myList, selector);
    
      for (var i = 0; i < myList.length; i++) {
        var row$ = $('<tr/>');
        for (var colIndex = 0; colIndex < columns.length; colIndex++) {
          var cellValue = myList[i][columns[colIndex]];
          if (cellValue == null) cellValue = "";
          row$.append($('<td/>').html(cellValue));
        }
        $(selector).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(myList, selector) {
      var columnSet = [];
      var headerTr$ = $('<tr/>');
    
      for (var i = 0; i < myList.length; i++) {
        var rowHash = myList[i];
        for (var key in rowHash) {
          if ($.inArray(key, columnSet) == -1) {
            columnSet.push(key);
            headerTr$.append($('<th/>').html(key));
          }
        }
      }
      $(selector).append(headerTr$);
    
      return columnSet;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <body onLoad="buildHtmlTable('#excelDataTable')">
      <table id="excelDataTable" border="1">
      </table>
    </body>