Dhana Dhana - 1 month ago 7
jQuery Question

How to edit and validate JSON data using angularjs?

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.

Here it is working with
<div>
tag, but here mine is with
<textarea>
, so I need to implement that same concept for my data with
textarea
. How can I implement ? Please help me and thanks in advance for help !

As I am getting below errors:

TypeError: Cannot read property 'hasOwnProperty' of undefined
TypeError: Cannot read property 'mode' of undefined


app.js:

var app = angular.module('plunker', ['ng.jsoneditor']);

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

$scope.JSONFiles = [];

$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';
};
};

});


index.html:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/josdejong/jsoneditor/master/dist/jsoneditor.min.css">
<script src="https://cdn.rawgit.com/josdejong/jsoneditor/master/dist/jsoneditor.min.js"></script>
<script src="https://cdn.rawgit.com/angular-tools/ng-jsoneditor/master/ng-jsoneditor.js"></script>
</head>

<body ng-controller="MainCtrl">
<p>Select json from drowdown: </p>
<select name="jsonfilenames" ng-model="selectedjson" ng-change="optionChanged()">

<option ng-repeat= "file in JSONFiles track by $index" value={{file}}>test{{$index+1}}</option>

</select>

<div style="display: flex">
<div class="container">
<h4 for="textarea1">Edit the selected json data:</h4>
<textarea id="textarea1" style="width: 100%; height: 100%;">{{textAreaData}} </textarea>

<!--<div ng-jsoneditor="onLoad" ng-model="obj.data" options="obj.options" id="textarea1" style="width: 100%; height: 100%;">
{{textAreaData}} </div>-->

</div>
</div>
<br><br><br><br><br>

<div id="textarea1" ng-jsoneditor="onLoad" ng-model="obj.data" options="obj.options" style="width: 400px; height: 400px;"></div><br>
<button type="button" class="btn btn-primary" ng-click="changeOptions()"><i class="fa fa-check-circle"></i> change options</button>

</body>
</html>


test1.json:

{
"id": 1,
"key1": "value1",
"key2": "value2"
}


test2.json:

{
"id": 2,
"Sample key for String": "Sample String",
"Sampe key for boolean": true
}


I have created the above code in Plnkr.

Answer

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

Comments