Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
<div ng-repeat="(item, children) in data">
{{item}}
<div ng-repeat="(child, moreChildren) in children">
<div class="child" ng-show="isGroup(child)">
{{child}}
<div class="leaf" ng-repeat="(leaf, leafValue) in moreChildren">
{{leaf}} - {{leafValue}}
</div>
</div>
<div class="leaf" ng-show="!isGroup(child)">
{{child}} - {{moreChildren}}
</div>
</div>
</div>
</div>
CSS
.child {
margin-left: 20px;
}
.leaf {
margin-left: 40px;
}
JavaScript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.data = {
"Part 1": {
"Group 1": {
"Link 1": "href1",
"Link 2": "href2"
},
"Group 2": {
"Link 3": "href3"
}
},
"Part 2": {
"Link 4": "href4",
"Link 5": "href5",
"Link 6": "href6"
}
};
$scope.isGroup = function(item) {
return item.indexOf('Group') == 0;
};
}