Display json object in angularjs codemirror

Question

I have a json object and want to display it on codemirror using angularjs codemirror but it got an error saying ui-codemirror cannot use an object or an array as a model. Then I tried to convert the object into string using JSON.stringify, the string does not format nicely in codemirror. Anyone can help me to figure out how to make my code in formatted nicely in codemirror? Thanks

ex:

//inside javascript

    $scope.code = {
        "name": "user1",
        "id": "34",
        "value": [3, 5, 4]
    };
    
     $scope.editorOptions = {
          lineWrapping : true,
          lineNumbers: true,
          mode: 'application/json',
        };

//inside html
<ui-codemirror ui-codemirror-opts="editorOptions" ng-model="code"></ui-codemirror>

It returns an error for this: ui-codemirror cannot use an object or an array as a model

if I change to JSON.stringify($scope.code), code mirror display like this:

{"name":"user1","id":"34","value":[3,5,4]}

However, I want it to display as this:

{

      "name": "user1",
      "id": "34",
      "value": [3, 5, 4]
    }

Any help? Thanks

Answer 1

You can specify the indentation:

$scope.codeView = JSON.stringify($scope.code, null, 4);

Live example