How to edit and validate JSON data using angularjs?

Question

I am getting and displaying json data for the selected file from dropdown in textarea successfully. Now my requirement is that I wanted to edit the json data for the selected file in textarea either using angularjs(ng-jsoneditor) or any other libraries/tools to validate. I have tried the following, but I cannot make it to work or integrate with this or any other libraries as expected to edit the content as it is giving: object {0} (empty object) on default or clicking on change options button.

I am following this.

I have created the above code in Plnkr.

Is there a reason you're trying to use your own textarea instead of using the one built into the editor? There are buttons on the JSFiddle you linked that let you edit data or options on the fly. — Vishal Kotcherlakota
– Vishal Kotcherlakota, Commented Oct 21, 2016 at 5:17
@VishalKotcherlakota, thanks for your reply, I mean i don't have any reason to use textarea particularly, I can use any, but the intention is I need to display my json content for the selected file and then it should be editable to add some extra json fields also(it can be validated like like json editor of jsfiddle). Please let me know ! — Dhana
– Dhana, Commented Oct 21, 2016 at 5:23

Marcus Höglund · Accepted Answer · 2016-10-21 05:34:05Z

1

You need to declare the "obj" object to the scope directly

app.controller('MainCtrl', function($scope,$http) {

    $scope.JSONFiles = [];
    $scope.obj = {data: '', options: { mode: 'tree' }}; 

    $http.get("test1.json").success(function (response) {
      $scope.JSONFiles.push(response);
    });
    $http.get("test2.json").success(function (response) {
       $scope.JSONFiles.push(response);
    });

    $scope.selectedjson ="";
    $scope.textAreaData = "";
    $scope.optionChanged = function(){
      $scope.textAreaData = $scope.selectedjson;
     // alert($scope.textAreaData);//gives selected file json data
      // code to implement json-editor

       $scope.obj = {data: $scope.textAreaData, options: {mode: 'tree'}};
            $scope.onLoad = function (instance) {
                instance.expandAll();
            };
            $scope.changeOptions = function () {
                $scope.obj.options.mode = $scope.obj.options.mode == 'tree' ? 'code' : 'tree';
            };
    };

});

Here's a working Plnkr.
The example in the docs also shows this

edited Oct 21, 2016 at 5:34

answered Oct 21, 2016 at 5:27

Marcus Höglund

16.9k11 gold badges53 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dhana Over a year ago

Thanks for your reply ! Yes, I forgot it and it's working fine your Plnkr too ! Thanks a lot for your help !

Dhana Over a year ago

I have one small query that if we observe clearly, some slashes("/") are coming for the selected json data ? How to remove those in <div>'s content ? May I know why these are coming ?

Marcus Höglund Over a year ago

The json is being stringified, meaning: The json contains " and to make them into one string the JSON.stringify() is being called which adds / infront o. If you want to remove them you can use JSON.parse()

Dhana Over a year ago

yes, I got it and working fine ! Thanks for your valuable support !

Marcus Höglund Over a year ago

No problems! Have a nice day

Collectives™ on Stack Overflow

How to edit and validate JSON data using angularjs?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related