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
– li0n_za, Commented Aug 4, 2016 at 11:34
Possible duplicate http://stackoverflow.com/questions/17893708/angularjs-textarea-bind-to-json-object-shows-object-object — jjwilly16
– jjwilly16, Commented Aug 4, 2016 at 11:38

Petr Averyanov · Accepted Answer · 2016-08-04 11:39:12Z

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 4, 2016 at 11:39

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

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

2 Comments

ahmetugurbulut Over a year ago

i think you're right. my solution's same as yours: jsfiddle.net/bbhoey5g/5

Petr Averyanov Over a year ago

docs.angularjs.org/api/ng/function/angular.toJson >> there is second argument: 'pretty'

marton · Accepted Answer · 2016-08-04 11:51:03Z

2

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.

answered Aug 4, 2016 at 11:51

marton

1,3508 silver badges17 bronze badges

Comments

Nicolas Zozol · Accepted Answer · 2016-08-04 11:44:11Z

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/

Collectives™ on Stack Overflow

angularjs json two way binding to text area

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related