Untitled

<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>
var data =  [
{"id":11653167,"info_init": {
  "date":"05.07.2018",
  "Time":"10:31:17"
  }
},
{"id":11653168,"info_init": {
 "date":"05.07.2019",
 "Time":"10:31:19"
 }
 }
];

$(document).ready(function () {
var html = '<table class="table table-striped">';
    html += '<tr>';
    var flag = 0;
    $.each(data[0], function(index, value){
        html += '<th>'+index+'</th>';
    });
    html += '</tr>';
     $.each(data, function(index, value){
         html += '<tr>';
		 
		 
        $.each(value, function(index2, value2){
			if (index2 == 'info_init')  {
				html += '<td>Date: '+value2.date+' | Time: '+value2.Time+'</td>';
			} else {
				html += '<td>'+value2+'</td>';
			}
        });
		
        html += '<tr>';
     });
     html += '</table>';
     $('body').html(html);
	 
});
	 
</script>
</head>

  <body>
    <p>Loading...</p>
  </body>

</html>

// Code goes here

/* Styles go here */