ng-jsoneditor
ng-jsoneditor copied to clipboard
Shows empty object when started in 'code' mode
See example: http://jsfiddle.net/fm3eku9q/
I'm expecting that editor will contain the JSON that was provided as an arg, but instead contains an empty object.
data must be passed as ng-model.
see this code: http://jsfiddle.net/angulartools/sd3at5ek/
Thanks for your response.
In the example that I provided to you in jsfiddle, data is passed as ng-model like in your example:
<div ng-jsoneditor="onLoad" ng-model="obj.data" options="obj.options" style="width: 400px; height: 300px;"></div>
Also, obj was added to the $scope as in your example:
$scope.obj = {data: json, options: {mode: 'code'}};
The only difference is that I would like that editor will start in "code" mode instead of "tree". If you simply change mode in your example to code, then editor will display an empty object.
I have the same problem. It is working when I open page first time and not for second and next times. First time I download json data from service so it takes some time. After refresh it gets data quickly (probably from cache) and it fails because when I set value of my model editor is not loaded.
I fixed problem by waiting with assigning value to model until editor is initialized.
I do something like this:
<div data-ng-jsoneditor="onEditorLoad" data-ng-model="definition" options="{ mode: 'code' }" class="editor"></div>
$scope.onEditorLoad = function (instance) {
$scope.editor = instance;
};
var setEditorData = function (data) {
if ($scope.editor) {
$scope.definition = data;
}
else {
$timeout(function() { setEditorData(data) }, 250);
}
}
I think this should be done inside component. So component itself should check if editor is loaded and if not wait before process with model value.
I've observed that this issue will not occur when starting in tree mode, then switching to code mode. It does occur when defaulting the mode to code.
Not sure if it makes a difference, but I am passing in my model as an object (not JSON string).
Hello,
Did you find a way to solve this problem ? I have the issue everytime I use the "code" mode. Tree view works fine but "code" always displays an empty object.
Using $interval to fixed 'code' mode $interval(function() { vm.obj.data = data }, 200,1);