lnlsn/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>JSON to Table</title>
    <!-- 2017-08-09 Wed 04:43 -->
    <meta  charset="utf-8">
    <meta  name="author" content="Lenilson Jose Dias">
    <link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Inconsolata:400,700" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
	drawRow(data[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#backlogDataTable").append(row);
    row.append($("<td>" + rowData.assigned_to_group_name + "</td>"));
    row.append($("<td>" + rowData._02 + "</td>"));
    row.append($("<td>" + rowData._02_05 + "</td>"));
    row.append($("<td>" + rowData._05_10 + "</td>"));
    row.append($("<td>" + rowData._10_15 + "</td>"));
    row.append($("<td>" + rowData._15 + "</td>"));
}


    </script>
  </head>
  <body>
    <div id="content">
      <h1 class="title">JSON to Table</h1>
      <div class="outline-2" id="meta">
	<table id="backlogDataTable">
	  <thead>
	    <th>Grupo</th>
	    <th>< 02 Dias</th>
	    <th>02 - 05 Dias</th>
	    <th>05 - 10 Dias</th>
	    <th>10 - 15 Dias</th>
	    <th>15 Dias</th>
	  </thead>
	</table>
	<script type="text/javascript">

	 var data = [
	      {
		 group_name_id: 24,
		 assigned_to_group_name: "N1",
		 _02: 10,
		 _02_05: 29,
		 _05_10: 3,
		 _10_15: 12,
		 _15: 2
				 },
					      {
		 group_name_id: 25,
		 assigned_to_group_name: "N2 FC",
		 _02: 0,
		 _02_05: 4,
		 _05_10: 11,
		 _10_15: 23,
		 _15: 0
				 },
					      {
		 group_name_id: 24,
		 assigned_to_group_name: "N2 FI",
		 _02: 15,
		 _02_05: 25,
		 _05_10: 12,
		 _10_15: 2,
		 _15: 1
				 },
					      {
		 group_name_id: 24,
		 assigned_to_group_name: "N2 RH",
		 _02: 1,
		 _02_05: 44,
		 _05_10: 34,
		 _10_15: 67,
		 _15: 2
	      },
	 ];

	 $(document).ready(function() {
	    console.log(data);
	    console.log(data.length);
	    console.log("ready!");
	    drawTable(data);
	 });
	</script>
      </div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>JSON to Table</title>
	<!-- 2017-08-09 Wed 04:43 -->
	<meta charset="utf-8">
	<meta name="author" content="Lenilson Jose Dias">
	<link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700\|Inconsolata:400,700" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript">
	function drawTable(data) {
	for (var i = 0; i < data.length; i++) {
	drawRow(data[i]);
	}
	}

	function drawRow(rowData) {
	var row = $("<tr />")
	$("#backlogDataTable").append(row);
	row.append($("<td>" + rowData.assigned_to_group_name + "</td>"));
	row.append($("<td>" + rowData._02 + "</td>"));
	row.append($("<td>" + rowData._02_05 + "</td>"));
	row.append($("<td>" + rowData._05_10 + "</td>"));
	row.append($("<td>" + rowData._10_15 + "</td>"));
	row.append($("<td>" + rowData._15 + "</td>"));
	}


	</script>
	</head>
	<body>
	<div id="content">
	<h1 class="title">JSON to Table</h1>
	<div class="outline-2" id="meta">
	<table id="backlogDataTable">
	<thead>
	<th>Grupo</th>
	<th>< 02 Dias</th>
	<th>02 - 05 Dias</th>
	<th>05 - 10 Dias</th>
	<th>10 - 15 Dias</th>
	<th>15 Dias</th>
	</thead>
	</table>
	<script type="text/javascript">

	var data = [
	{
	group_name_id: 24,
	assigned_to_group_name: "N1",
	_02: 10,
	_02_05: 29,
	_05_10: 3,
	_10_15: 12,
	_15: 2
	},
	{
	group_name_id: 25,
	assigned_to_group_name: "N2 FC",
	_02: 0,
	_02_05: 4,
	_05_10: 11,
	_10_15: 23,
	_15: 0
	},
	{
	group_name_id: 24,
	assigned_to_group_name: "N2 FI",
	_02: 15,
	_02_05: 25,
	_05_10: 12,
	_10_15: 2,
	_15: 1
	},
	{
	group_name_id: 24,
	assigned_to_group_name: "N2 RH",
	_02: 1,
	_02_05: 44,
	_05_10: 34,
	_10_15: 67,
	_15: 2
	},
	];

	$(document).ready(function() {
	console.log(data);
	console.log(data.length);
	console.log("ready!");
	drawTable(data);
	});
	</script>
	</div>
	</body>
	</html>