Iterate Object with arrays

I am using handlebars and ran into an issue with trying to group by a category but I was able to fix that by using underscorejs.  Now my issue is using my object categorized into arrays into my template.  Here's an image of what I see in the developer tools:

As you can see, it's an object with two arrays.  I got the data to show by doing the following but as you will see, it's not very efficient because there are actually have 6 categories and not just two.

<!-- Handlebar Js Template Starts Here -->
   
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script type="text/javascript" src="../nrm/SiteAssets/projectMilestone.js"></script>

<script id="projectMilestone-template" type="text/x-handlebars-template">
 
<table border=1> 
 	<tr>
 		<th colspan="7">Milestones</th>
 	</tr>


	<tr>
		<td>Milestone Description</td>
		<td>Planned Date</td>
		<td>Revised Date</td>
		<td>Actual Date</td>
		<td>Type</td>
	</tr>
{{#Construction}}	
	<tr>
		<td>{{ MilestoneDescription}}</td>
		<td>{{ Planned_x0020_Date}}</td>
		<td>{{ Revised_x0020_Date}}</td>
		<td>{{ Actual_x0020_Date}}</td>
		<td>{{ Milestone_x0020_Type }}</td>
	</tr>
{{/Construction}}
 

	<tr>
		<td>Milestone Description</td>
		<td>Planned Date</td>
		<td>Revised Date</td>
		<td>Actual Date</td>
		<td>Type</td>
	</tr>
{{#Design}}	
	<tr>
		<td>{{ MilestoneDescription}}</td>
		<td>{{ Planned_x0020_Date}}</td>
		<td>{{ Revised_x0020_Date}}</td>
		<td>{{ Actual_x0020_Date}}</td>
		<td>{{ Milestone_x0020_Type }}</td>
	</tr>
{{/Design}}

</table>
 
</script>

<div id="projectMilestone"></div>

Select allOpen in new window

Here's my Javascript code:

//Loading items for handlebars to use
function loadSPItems() {
 var projNum = '402-CSI-001';
var endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('Project Milestones')/items?$select=MilestoneDescription,Milestone_x0020_Type,Planned_x0020_Date,Revised_x0020_Date,Actual_x0020_Date&$filter=Title eq '"+projNum+"'";//,ProjectNumber,ApprovalStatus,ProjectExecutionStatus”;
console.log(endPointUrl);
var headers = { 
	"accept": "application/json;odata=verbose" 
}
 
jQuery.ajax({ 
	url: endPointUrl, 
	type: "GET", 
	headers: headers, 
	success: function (data) {
console.log(data);
	var groupData = _.groupBy(data.d.results, function(d){return d.Milestone_x0020_Type});
	
	console.log(groupData)

    	//1.Get the template source from the DOM
    	//returns final mark up with interpolation
		var source = $("#projectMilestone-template").html(); 
		
		//2. Compile the template source into a template *function*
		var profileTemplate = Handlebars.compile(source); 	
		//3. call our template function, passing in data to render the template with
		var renderTemplate = profileTemplate(groupData); 
		
		//4. Add our rendered HTML to the page
		$("#projectMilestone").html(renderTemplate)
}, 
	error: function (err) { 
	alert("Error Occured:" + JSON.stringify(err)); 
}
 
});
 
}
loadSPItems();

Select allOpen in new window