JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<table id="limitless-table" border="1" class="bordered responsive-table">
  <thead>
    <tr>
      <th>Build Name</th>
      <th>Base Table</th>
      <th>Query List</th>
    </tr>
  </thead>
</table>

JavaScript

var data = $.parseJSON('{"result":{"buildname1":[{"table1":["xxx","zzz", "zzz"]},{"table2":["xxx","yyy"]}],"buildname2":[{"table1":["xxx","xxx", "zzz"]},{"table2":["xxx","xxx"]},{"table3":["xxx","yyy"]}]},"Build sets":"yyy","destinationPath":"xxx","status":1}');

console.log(data)

function generateTable(data) { //data is the parsed JSON Object from an ajax request
  $("#limitless-table tbody").empty(); //Empty the table first  
  _.chain(data.result)
    .keys()
    .flatten()
    .each(function(key) {
      data.result[key] = _.chain(data.result[key]).flatten().map(function(d) {
        var key = _.chain(d).keys().first().value();
        var ob = {};
        ob[key] = _.chain(d).values().flatten().groupBy().value();
        return ob;
      }).value();
    }).value();
  $.each(data.result, function(key, elem) {
    var baseHtml = "";
    var childrenHtml = "";
		var maxRowSpan = 0;
    $.each(elem, function(index, inner_elem) {
      var innerElemKey = Object.keys(inner_elem)[0];
      var arr = inner_elem[innerElemKey];
      var elemRowSpan = 0;
      if (index === 0) {
				elemRowSpan = _.chain(arr).keys().value().length;
				maxRowSpan+=elemRowSpan;
        childrenHtml += ('<td rowspan="' + elemRowSpan + '">' + innerElemKey + '</td>');
        _.chain(arr).keys().each(function(key, indx) {
					var value = arr[key].length;
          if (indx === 0) {
            childrenHtml += ('<td rowspan="1" data-count="'+value+'" >' + key + '</td>' + '</tr>');
          } else {
            childrenHtml += ('<tr><td rowspan="1" data-count="'+value+'" >' + key + '</td>' + '</tr>');
          }
        });
      } else {
			  elemRowSpan = _.chain(arr).keys().value().length;
				maxRowSpan+=elemRowSpan;
        childrenHtml += ('<tr><td rowspan="' + elemRowSpan + '">' + (innerElemKey) + '</td>');
        _.chain(arr).keys().each(function(key, indx) {
				  var value = arr[key].length;
          if (indx === 0) {
            childrenHtml += ('<td rowspan="1"...