current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 4 down vote favorite
2

I have AngularJS application, which collects data from input, transforms model into string using JSON.stringify() and lets a user edit this model in such way that input fields get updated if the <textarea> 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:

enter image description here

And not like it looks now:

enter image description here

Any ideas how this can be acomplished? If you need some additional info - don't hesitate asking. Every answer is highly appreciated and answered immidiately.

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.

share|improve this question
1  
Can you try this - In the textarea, press enter and format the resultant string as desired. Then in your $watch (based on the answer to previous question) over the textarea model, can you do a console.log() and see what value you get in the string for the enter key - I think it's "/n" –  callmekatootie Apr 1 '14 at 12:29
1  
Based on this, I can suggest how you can format the text –  callmekatootie Apr 1 '14 at 12:29
    
Ok, just a minute –  Nazar Sobchuk Apr 1 '14 at 12:32
    
{"anchorPosition":"1", "difficulty":"1", "includeInSequence":"1", "questionCount":"1"} –  Nazar Sobchuk Apr 1 '14 at 12:35
    
Basically nothing changed after String got formated. –  Nazar Sobchuk Apr 1 '14 at 12:36

3 Answers 3

up vote 8 down vote accepted

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
    }
}"
share|improve this answer
1  
note that this preserves the $$hashKey property angular uses for internal model tracking –  PixnBits Aug 20 '14 at 19:40
up vote 54 down vote

Angular has a built-in filter for showing JSON

<pre>{{data | json}}</pre>

Note the use of the pre-tag to conserve whitespace and linebreaks

Demo: http://plnkr.co/edit/lwqajlWvJGTaH0HTfnJd?p=preview

There's also an angular.toJson method, but I haven't played around with that (Docs)

share|improve this answer
    
Yes, I know this already. But I can't make this filter because the textarea itself is a model. –  Nazar Sobchuk Apr 1 '14 at 12:37
up vote 2 down vote

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/

enter image description here

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.