0

I have AngularJS web app, which is capable of sending different http methods to our Restful WS. Each request has a preview, where all of it's properties are listed and can be changed in place. Everything works fine except the formating for inputing JSON. It looks like this:

enter image description here

And I would like it to look like this, except that JSON text was displayed like in picture 1:

enter image description here

Shortly, I need that the left side was as in 1 pic, and the right side - as in the second pic.

Here's piece of code, which is responsible for generating input for JSON:

<div ng-show="field.restResourceName != null">
    <p ng-show={{field.isRequired}}>{{field.name}}*: </p>
    <p ng-show={{!field.isRequired}}>{{field.name}}: </p>
    <accordion id="entityField" close-others="oneAtATime">
        <accordion-group heading={{field.name}} is-open="false">
            <p>JSON:</p>
            <textarea ng-change="getCreateEntityAsText()" ng-model="createEntityResource[field.name]"></textarea>
        </accordion-group>
    </accordion>
</div>

And here's the one, responsible for showing the output:

<div class="preview">
    <p>Preview: </p>
    <textarea class="form-control" ng-model="createEntityTextAreaModel"></textarea>
</div>

AngularJS controller functions, which parse JSON into model and vice versa:

//CREATE ENTITY JSON PARSE


$scope.getCreateEntityAsText = function () {
    $scope.createEntityTextAreaModel = JSON.stringify($scope.createEntityResource, null, "    ");
};

$scope.$watch('createEntityTextAreaModel', function () {
    applyParseValues($scope.createEntityTextAreaModel, $scope.createEntityResource);
});

applyParseValues = function(textAreaModel, entityModel){
    if($rootScope.isNotEmptyString(textAreaModel)) {
       angular.copy(JSON.parse(textAreaModel), entityModel);
    } else {
        angular.copy({}, entityModel);
    }
}

Any ideas how this can be achieved? Every useful answer is highly appreciated and evaluated.

Thank you.

amenoire
  • 1,892
  • 6
  • 21
  • 34

1 Answers1

1

It looks like you're mostly having a styling issue, which is addressed in this question:

JSON formatter lib

Otherwise, Angular comes with a built-in filter for JSON, which can be used in a view like this:

<p>{{someObject | json }}</p>

Links:

https://docs.angularjs.org/api/ng/filter/json https://docs.angularjs.org/api/ng/filter/json

Community
  • 1
  • 1
Moshe Bildner
  • 461
  • 5
  • 9
  • I am using JSON.stringify in my function. And I can't just use the filter because it isn't the output, but an input with assigned ng-model. – amenoire Apr 23 '14 at 12:14