AngularJS: textarea bind to JSON object shows "object-object"

Question

I am fairly new to AngularJS.

I am trying to bind an object to a textarea.

HTML:

<textarea rows="5" cols="10" ng-model="menuItem.preset"></textarea>

Model:

{
    "kind": "title",
    "label": "ADD_TITLE",
    "iconSrc": "textTitle.png",
    "experimentInclude": "",
    "experimentExclude": "three",
    "preset": {
        "compType": "richTitle",
        "styleId": "txtNew"
    }
}

Result:

json shown as object

How can I show the JSON stringified (and later save it as an object again)?

holographic-principle · Accepted Answer · 2013-07-28T12:21:51.980

32

You need a custom directive that parses the input to an object, and displays the object as a string, respectively:

Something like:

angular.module('yourApp').directive('jsonText', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {            
          function into(input) {
            return JSON.parse(input);
          }
          function out(data) {
            return JSON.stringify(data);
          }
          ngModel.$parsers.push(into);
          ngModel.$formatters.push(out);

        }
    };
});

<textarea json-text rows="5" cols="10" ng-model="menuItem.preset"></textarea>

Fiddle: http://jsfiddle.net/HzYQn/

edited Jul 28 '13 at 12:21

answered Jul 28 '13 at 01:21

holographic-principle

19,688
10
46
62

@Jason that fiddle is not my solution (maybe you forgot to save it) but here's one here: http://jsfiddle.net/HzYQn/ – holographic-principle Jul 28 '13 at 12:21
7

For pretty-printing use `return JSON.stringify(data, undefined, 2);` – Amir Nissim Feb 02 '14 at 15:21
4

for 2 way data binding I had to add `scope.$watch(attr.ngModel, function(newValue) {element[0].value = out(newValue); }, true);` – Amir Nissim Mar 25 '14 at 14:14
This throws an error that shows up in the console, though. – efeder Sep 05 '14 at 18:32
@efeder Does it happen only on jsfiddle or outside of its sanbox as well? – holographic-principle Sep 05 '14 at 19:31
I implemented it on my site, and it throws an error, which shows up in the developer console. I wrapped the JSON parse/stringify in try catch blocks, and if an error is thrown, I set a scope variable so that the view can display that the json is invalid. But I'm still not sure what to return from the into/out functions in that case. – efeder Sep 08 '14 at 13:15

score 25 · Answer 2 · edited May 23 '17 at 12:25

I’ve just researched what I believe to be the most “proper” way of doing this, as I needed it for my https://github.com/vorburger/MUI.js... So here is a Plonker with my solution. It’s based on & is essentially a special case (i.e. an application of) the related Q How to do two-way filtering in angular.js? The added twist is that model updates should also change the textbox.. that's what the $watch / $setViewValue / $render thing does.

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

app.directive('jsonText', function() {
  return {
    restrict: 'A', // only activate on element attribute
    require: 'ngModel', // get a hold of NgModelController
    link: function(scope, element, attrs, ngModelCtrl) {

      var lastValid;

      // push() if faster than unshift(), and avail. in IE8 and earlier (unshift isn't)
      ngModelCtrl.$parsers.push(fromUser);
      ngModelCtrl.$formatters.push(toUser);

      // clear any invalid changes on blur
      element.bind('blur', function() {
        element.val(toUser(scope.$eval(attrs.ngModel)));
      });

      // $watch(attrs.ngModel) wouldn't work if this directive created a new scope;
      // see https://stackoverflow.com/questions/14693052/watch-ngmodel-from-inside-directive-using-isolate-scope how to do it then
      scope.$watch(attrs.ngModel, function(newValue, oldValue) {
        lastValid = lastValid || newValue;

        if (newValue != oldValue) {
          ngModelCtrl.$setViewValue(toUser(newValue));

          // TODO avoid this causing the focus of the input to be lost..
          ngModelCtrl.$render();
        }
      }, true); // MUST use objectEquality (true) here, for some reason..

      function fromUser(text) {
        // Beware: trim() is not available in old browsers
        if (!text || text.trim() === '') {
          return {};
        } else {
          try {
            lastValid = angular.fromJson(text);
            ngModelCtrl.$setValidity('invalidJson', true);
          } catch (e) {
            ngModelCtrl.$setValidity('invalidJson', false);
          }
          return lastValid;
        }
      }

      function toUser(object) {
        // better than JSON.stringify(), because it formats + filters $$hashKey etc.
        return angular.toJson(object, true);
      }
    }
  };
});


app.controller('Ctrl', ['$scope',
  function($scope) {
    $scope.model = {};
    $scope.model.data = {
      "kind": "title",
      "label": "ADD_TITLE",
      "iconSrc": "textTitle.png",
      "experimentInclude": "",
      "experimentExclude": "three",
      "preset": {
        "compType": "richTitle",
        "styleId": "txtNew"
      }
    };
  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div ng-app="app" class="container">
  <div ng-controller="Ctrl" class="row">
    <textarea json-text ng-model='model.data' rows="15"></textarea>
    <p>{{ model.data }}</p>
  </div>
</div>

Thanks, here's my updated version of your directive: http://jsfiddle.net/tnunamak/cea3k/ — tnunamak, Apr 12 '14 at 04:59
this doesn't work if you update the textarea using copy/paste a valid json. — Alexandru R, Apr 22 '16 at 07:21

score 13 · Answer 3 · answered Feb 16 '14 at 14:11

13

try with json filter

<textarea rows="5" cols="10" >
   {{ menuItem.preset | json }}
</textarea>

answered Feb 16 '14 at 14:11

Oscar López

381
2
8

11

this won't bind the value back to the scope – guy mograbi Nov 27 '14 at 08:13

score 5 · Answer 4 · answered Sep 04 '13 at 09:52

Here is our JSON directive with validity checks:

app.directive('jsonInput', function () {
  'use strict';
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function (scope, elem, attr, ctrl) {
        ctrl.$parsers.unshift(function(input) {
          try {
            var obj = JSON.parse(input);
            ctrl.$setValidity('jsonInput', true);
            return obj;
          } catch (e) {
            ctrl.$setValidity('jsonInput', false);
            return null;
          }
        });
        ctrl.$formatters.unshift(function(data) {
          if (data == null) {
            ctrl.$setValidity('jsonInput', false);
            return "";
          }
          try {
            var str = JSON.stringify(data);
            ctrl.$setValidity('jsonInput', true);
            return str;
          } catch (e) {
          ctrl.$setValidity('codeme', false);
              return "";
          }
        });
    }
  };

});

When the user enters invalid JSON, the model is null. When the model contains circular references or is null, the user will see an empty string ("") and the input is invalid.

Enjoy.

Changes in 1.3 break this code. Here is a fix for this: http://stackoverflow.com/questions/26564986/use-a-formatter-on-a-object-typed-ngmodel-value-with-angular-1-2-worked-but-no — s.Daniel, Mar 04 '15 at 20:56

Stepan Suvorov · Answer 5 · 2013-07-27T17:06:59.690

3

also you can define toString method on your model:

  $scope.menuItem.preset.toString = function(){
        return JSON.stringify(this);
    }

http://jsfiddle.net/ceJ4w/19/

and then to synchronise back use watch

http://jsfiddle.net/ceJ4w/20/

but it looks more like dirty hack than solution

edited Jul 27 '13 at 17:06

answered Jul 27 '13 at 13:35

Stepan Suvorov

25,118
26
108
176

1

Guy, it's automatically saved for you :-) – aziz punjani Jul 27 '13 at 16:35
Guy, you are right. We can use $watch to keep it as object (updated answer) – Stepan Suvorov Jul 27 '13 at 17:07

score 1 · Answer 6 · answered Jan 06 '16 at 05:39

1

Is using the ng-change event too messy?

<textarea ng-model="textmainboardJSON" ng-change="updateMainboard()"

http://jsfiddle.net/gsw9Q/3/

answered Jan 06 '16 at 05:39

Steve Black

609
5
9

score 0 · Answer 7 · answered Jul 27 '13 at 03:01

0

You can do that in two steps :

Create a filter that'll stringify JSON (http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters)
$scope.watch the field to save it when it changes (example http://jsfiddle.net/ceJ4w/)

answered Jul 27 '13 at 03:01

Ven

19,015
2
41
61

is there something more like this? http://plnkr.co/edit/kZ2H5pFIibXFwkCk3zEV?p=preview – Guy Jul 27 '13 at 03:29
(y) like the idea of filter for JSON stringify – Stepan Suvorov Jul 27 '13 at 12:56

score 0 · Answer 8 · answered Sep 13 '17 at 10:51

0

Try this. It worked in my case

<textarea rows="5" cols="10" >{{menuItem.preset}}</textarea>

answered Sep 13 '17 at 10:51

Rohidas Kadam

428
5
12

score 0 · Answer 9 · answered Jan 31 '19 at 07:59

I have simple way to bind arrays data to text area in angularjs. When there are two arrays and you need to show them parallel. Further you can get it on jsfiddle as well.

http://jsfiddle.net/Ahsan_Aftab/bc7hd258/18/

<!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    <body>

    <div ng-app="myApp" ng-controller="myCtrl">


            <textarea ng-model="TextAreacodeGroups" style="width:52%;height:200px;" columns="25" id="code_groups">

        {{CodeGroupsFun()}}

       </textarea>

    </div>

<script>

    var app = angular.module('myApp', []);

    app.controller('myCtrl', function($scope) {
        var combined;
        var array1=['01','02','03','04'];
        var array2= ['Students','Teachers','Managers','Operators'];

     $scope.CodeGroupsFun = function () {

     $scope.TextAreacodeGroups =
      combined = array1.map(function (e, i) {
       return '\n' + array1[i] + '     -     ' + array2[i];
                    });
                };
    });

</script>    
    </body>
    </html>

AngularJS: textarea bind to JSON object shows "object-object"

9 Answers9

Linked