Currently, I have integrated ng-jsoneditor into my AngularJS application to display and format JSON data. I found guidance on how to implement this from both here and here.
Here is the HTML code snippet:
<div ng-jsoneditor="onLoad"
ng-model="vm.obj.data"
options="vm.obj.options"
style="width: 400px; height: 300px;">
</div>
And here is the relevant JavaScript code:
vm.json = {
"Array": [1, 2, 3],
"Boolean": true,
"Null": null,
"Number": 123,
"Object": {
"a": "b",
"c": "d"
},
"String": "Hello World"
};
vm.obj = {
data: vm.json,
options: {
mode: 'tree'
}
};
$scope.onLoad = function (instance) {
instance.expandAll();
};
The displayed output appears like this (slightly distorted):