My JSON object contains various properties with unique names:
var definitions = {
foo: {
bar: {abc: '123'},
baz: 'def'
},
qux: {
broom: 'mop',
earth: {
tree: 'leaf',
water: 'fish'
},
fig: {
qwerty: 'olive'
}
},
blix: {
worm: 'dirt',
building: 'street'
}
... more nested objects
};
Currently, I am displaying this data in the following way:
<div class="type" ng-repeat="(key,val) in definitions">
<h4 ng-model="collapsed" ng-click="collapsed=!collapsed">{{key}}</h4>
<div ng-show="collapsed">{{val}}</div>
</div>
Below is my controller code:
App.controller('DefinitionsCtrl', function ($scope) {
$scope.definitions = definitions;
});
The {{val}} currently displays a condensed string of the property when its corresponding {{key}} is clicked. I want to further parse the val section, so that for example, the nested properties of foo (such as bar and baz) each have their own respective divs. This should apply to all nested values. Since manually doing this is not feasible due to the file size, I need a more efficient solution.
Is it possible to achieve this given that all the nested property names are unique? Would I need to create a custom filter, or should this be handled within the controller?