ng-jsoneditor icon indicating copy to clipboard operation
ng-jsoneditor copied to clipboard

Shows empty object when started in 'code' mode

Open franza opened this issue 9 years ago • 6 comments

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.

franza avatar Dec 21 '15 17:12 franza

data must be passed as ng-model.

see this code: http://jsfiddle.net/angulartools/sd3at5ek/

angular-tools avatar Dec 24 '15 10:12 angular-tools

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.

franza avatar Dec 24 '15 17:12 franza

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.

wisza avatar Jan 07 '16 11:01 wisza

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).

doingweb avatar Mar 09 '16 22:03 doingweb

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.

ptrussart avatar Oct 11 '16 07:10 ptrussart

Using $interval to fixed 'code' mode $interval(function() { vm.obj.data = data }, 200,1);

HelloJasonZhang avatar Dec 07 '16 03:12 HelloJasonZhang