angularjs json two way binding to text area

Question

I want to two way binding to a text area that will contain json object as text, and I should able to edit the json object in textarea as two way. working demo is here

<div ng-app="app">
  <div ng-controller="GeojsonController">
    <textarea ng-model="geojson"></textarea>
    <p>Geojson is: {{geojson | json}} </p>
  </div>
</div>

angular.module('app', [])
  .controller('GeojsonController', ['$scope', function($scope) {
    $scope.geojson = {
      "type": "FeatureCollection"
    };
  }]);

Text area content is [object Object]

`$scope.geojson` is already a json object, that is why you get `[object Object]` in your textarea, you are going to have to use `$scope.geojson` as a string and then convert the string to json. — li0n_za, Aug 04 '16 at 11:34
Possible duplicate [http://stackoverflow.com/questions/17893708/angularjs-textarea-bind-to-json-object-shows-object-object](http://stackoverflow.com/questions/17893708/angularjs-textarea-bind-to-json-object-shows-object-object) — jjwilly16, Aug 04 '16 at 11:38

score 2 · Answer 1 · answered Aug 04 '16 at 11:39

2

<textarea ng-model="geojson" ng-change="update()"></textarea>

$scope.geo = {
  "type": "FeatureCollection"
};
$scope.geojson = angular.toJson($scope.geo);

$scope.update = function() {
    $scope.geo = angular.fromJson($scope.geojson);
}

https://jsfiddle.net/f9fnetca/1/

P.S. Add some handling for invalid json.

answered Aug 04 '16 at 11:39

Petr Averyanov

9,327
3
20
38

i think you're right. my solution's same as yours: https://jsfiddle.net/bbhoey5g/5/ – a.u.b Aug 04 '16 at 11:42
https://docs.angularjs.org/api/ng/function/angular.toJson >> there is second argument: 'pretty' – Petr Averyanov Aug 04 '16 at 12:38

score 2 · Answer 2 · answered Aug 04 '16 at 11:51

You can implement a custom directive, using $formatters and $parsers

.directive('toJson', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
     ctrl.$formatters.push(JSON.stringify);
    }
  }
});

<textarea ng-model="geojson" to-json></textarea>

Check out the Custom Validation example in the docs to get a better idea.

score 1 · Answer 3 · answered Aug 04 '16 at 11:44

You want to use $formatters and $parsers of ng-model to make bijection between the object in your model, and the text displayed in the input.

Hopefully, there is much simpler by working with a controller function. You show text and work on object. The getJson() method make the work

<div ng-app="app">
  <div ng-controller="GeojsonController">
    <textarea ng-model="geojson"></textarea>
    <p>Geojson is: {{getJson(geojson) | json}} </p>
  </div>
</div>

Then :

angular.module('app', [])
  .controller('GeojsonController', ['$scope', function($scope) {
    $scope.geojson = '{"type": "FeatureCollection"}';

    $scope.getJson = function(){
        return JSON.parse($scope.geojson);
    }
  }]);

Here is JSFiddle : https://jsfiddle.net/bbhoey5g/6/

angularjs json two way binding to text area

3 Answers3