JSFiddle - React, Tailwind, and code Playground

by denvut

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":{"buildname3":[{"table1":["xxx","zzz", "zzz", "sdsd"]}],"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}');

function generateTable(data){ //data is the parsed JSON Object from an ajax request
		    $("#limitless-table tbody").empty();//Empty the table first   
		    $.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 = arr.length;
		        maxRowSpan += arr.length;

		        if (index === 0) {
		          childrenHtml += ('<td rowspan="' + elemRowSpan + '">' + innerElemKey + '</td>');
		          $.each(arr, function (indx, child) {
		            if (indx === 0) {
		              childrenHtml += ('<td rowspan="1">' + child + '</td>' + '</tr>');
		            }
		            else {
		              childrenHtml += ('<tr><td rowspan="1">' + child + '</td>' + '</tr>');
		            }
		          });
		        }
		        else {
		          childrenHtml += ('<tr><td rowspan="' + elemRowSpan + '">' + innerElemKey + '</td>');
		          var queryObject = _.countBy(arr);
		          $.each(arr, function (indx, child) {
		            if (indx === 0) {
		              childrenHtml += ('<td rowspan="1">' + child + '</td>' + '</tr>');
		            }
		            else {
		              childrenHtml += ('<tr><td rowspan="1">' + child + '</td>' + '</tr>');
		            }
		          });
		        }
		      });
		      baseHtml += ('<tr><td rowspan="' + maxRowSpan + '">' + key + '</td>');
		      $("#limitless-table").append(baseHtml + childrenHtml);
		    });
		}
    
    $(function(){
    	generateTable(data);
...