AngularJS format JSON string output

Question

I have an AngularJS application  which collects data from input  transforms a model into a string using JSON stringify   and lets a user edit this model in such a way that input fields get updated if the  lt textarea gt  element is updated and vice versa  Some kind of two-way binding     The problem is that the String itself looks ugly and I would like to format it so it looks like this     And not like it looks now     Any ideas how this can be accomplished  If you need some additional info - don t hesitate asking  Every answer is highly appreciated and answered immediately   Thank you   P S  I guess this should be some kind of directive or a custom filter  Data itself SHOULD NOT be changed  only the output

User · Answer

If you are looking to render JSON as HTML and it can be collapsed opened  you can use this directive that I just made to render it nicely   https   github com mohsen1 json-formatter

User · Answer

Angular has a built-in filter for showing JSON   lt pre gt   data   json   lt  pre gt    Note the use of the pre-tag to conserve whitespace and linebreaks  Demo    x000D   x000D  angular module  app       x000D     controller  Ctrl      scope   x000D      function  scope    x000D   x000D         scope data     x000D          a  1  x000D          b  2  x000D          c    x000D            d   3  x000D             x000D           x000D   x000D        x000D        x000D   lt  DOCTYPE html gt  x000D   lt html ng-app  app  gt  x000D   x000D     lt head gt  x000D       lt script data-require  angular js 1 2 15  data-semver  1 2 15  src    code angularjs org 1 2 15 angular js  gt  lt  script gt  x000D     lt  head gt  x000D   x000D     lt body ng-controller  Ctrl  gt  x000D       lt pre gt   data   json   lt  pre gt  x000D     lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    There s also an angular toJson method  but I haven t played around with that  Docs

User · Answer

In addition to the angular json filter already mentioned  there is also the angular toJson   function   angular toJson obj  pretty     The second param of this function lets you switch on pretty printing and set the number of spaces to use      If set to true  the JSON output will contain newlines and whitespace  If set to an integer  the JSON output will contain that many spaces per indentation        default  2

User · Answer

If you want to format the JSON and also do some syntax highlighting  you can use the ng-prettyjson directive  See the npm package   Here is how to use it   lt pre pretty-json  jsonObject  gt  lt  pre gt

User · Answer

I guess you want to use  to edit the json text  Then you can use ivarni s way        data   json   and add an adition attribute to make  editable   lt pre contenteditable  true  gt   data   json   lt  pre gt    Hope this can help you

User · Answer

You can use an optional parameter of JSON stringify       JSON stringify value   replacer    space         Parameters         value The value to convert to a JSON string    replacer If a function    transforms values and properties encountered while stringifying  if an   array  specifies the set of properties included in objects in the   final string  A detailed description of the replacer function is   provided in the javaScript guide article Using native JSON     space   Causes the resulting string to be pretty-printed       For example   JSON stringify  a 1 b 2 c  d 3  e 4   null           will give you following result           a   1       b   2       c              d   3           e   4

[javascript] AngularJS format JSON string output

Examples related to javascript

Examples related to json

Examples related to string

Examples related to angularjs

Examples related to formatting