Formatting a string to JSON Object to disply in HTML In a textarea w/ [(ngModel)]

Question

I have a string json object that I am trying to format and display in the html. I have tried using JSON.parse() and JSON.stringify() but the typeof is still showing as a string and it is displaying in a straight line instead of formatting . I also tried <pre> {{formatJson | json}}</pre> and still no success.

formatJSON: string  = '{"a":1,"b":2,"c":{"d":3, "e":4}}'

ngOnInit() {
  var test = json.parse(this.formatJSON);
  console.log(typeof test); //string
  this.formatJSON = JSON.stringify(test, null, "   ")

}

HTML Code:

<div>
  <textarea [(ngModel)]="formatJSON" class="text-area" cols="200" rows="10">
       {{formatJSON}}
  </textarea>
</div>


<!-- <pre>{{formatJSON | json}}</pre> -->

Desired Output:

Possible duplicate of [Angular 2 pipe that transforms JSON object to pretty-printed JSON](https://stackoverflow.com/questions/37308420/angular-2-pipe-that-transforms-json-object-to-pretty-printed-json) — peinearydevelopment, Apr 01 '19 at 14:51
JSON is basically a map from `string` to `any`. But in your case, your fields are not string which makes your JSON invalid. — Onur Arı, Apr 01 '19 at 14:52
What do you mean my fields are not string? and what would be the solution then? — Flash, Apr 01 '19 at 14:56
Possible duplicate of [Pretty Json object in html](https://stackoverflow.com/questions/45253208/pretty-json-object-in-html) — nircraft, Apr 01 '19 at 15:07
I tried out the pretty json custom pipe but it didn't work it looks like I have to do some type of innerHTML or something — Flash, Apr 01 '19 at 15:12

nircraft · Accepted Answer · 2019-04-01T15:16:23.560

7

Try this:

var data = {"a":1,"b":2,"c":{"d":3,"e":4}}


document.getElementById("json-textArea").innerHTML = JSON.stringify(data, undefined, 2);

textarea { 

width:100px;
height: 150px;

}

<textarea id="json-textArea"></textarea>

check this stackblitz for the angular version: In Angular you just need to run your JSON data through json pipe and you will be fine.

edited Apr 01 '19 at 15:16

answered Apr 01 '19 at 14:53

nircraft

8,242
5
30
46

where is the css info for json-container Im using angular with material design – Flash Apr 01 '19 at 14:56
you don't need it.. it's just a sample class name. Your `` tag should take care of it. – nircraft Apr 01 '19 at 15:02
it still displyed it in one line and I also need it in a textarea tag – Flash Apr 01 '19 at 15:04
Make sure the JSON output is in a
```
 tag. Check  his: http://jsfiddle.net/K83cK/
```
– nircraft Apr 01 '19 at 15:06
so it can't be in a textarea tag – Flash Apr 01 '19 at 15:10
Updated my answer.. please check – nircraft Apr 01 '19 at 15:11
it displayed as [OBJECT, OBJECT] – Flash Apr 01 '19 at 15:22
did you use `{{data | json}}` check the stackblitz link which is shared in answer. – nircraft Apr 01 '19 at 15:31
oh ok it was becasue I was suing ngModel. I can't have [(ngmode)]? – Flash Apr 01 '19 at 15:35
You should not use `pipe` with two way data-binding, if you really want to use it with `ngModel`, you should consider one way data binding with `ngModelChange` – nircraft Apr 01 '19 at 16:07
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/191032/discussion-between-nircraft-and-flash). – nircraft Apr 01 '19 at 16:07

score 1 · Answer 2 · edited Oct 30 '19 at 14:50

1

Please try this. Update your JSON string like below

formatJSON = {
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}

You can apply angular pipe on formatJSON in your html like this {{formatJSON | json}}.

edited Oct 30 '19 at 14:50

Matt Cremeens

4,951
7
38
67

answered Apr 01 '19 at 15:07

prem

27
6

well the real issue is its coming back from the server as a string object? So how would I format it in a text area – Flash Apr 01 '19 at 15:09
yeah and formateed. and really it's coming back from the server as a string so I don't know it I can just remove the quotes. – Flash Apr 01 '19 at 15:17
1

First your server should send the proper json. If not then you won't be able to format it. Once you have a correct JSON you can use angular pipe to format it in HTML or in your component. – prem Apr 01 '19 at 15:22
Thanks when you say proper JSON you mean without quotes? – Flash Apr 01 '19 at 15:23
yes. What's your server side code. Is it node js api or something else. – prem Apr 01 '19 at 15:29

score 1 · Answer 3 · edited Oct 31 '19 at 11:38

I have applied it in angular Dialog material like this

in ts file

this.response=JSON.stringify(JSON.parse(item.response_body), null, 2);

in html

<mat-dialog-content>
  <pre class="response-class"> {{data.response}}   </pre>
</mat-dialog-content>

in css

 ::ng-deep .response-class {
    white-space: pre-wrap;
}

It will work fine if it's a valid json, you can use pretty json to check from it http://jsonprettyprint.com/

Sebastian Castaldi · Answer 4 · 2022-03-30T01:21:59.730

0

This is an easy way to show json, with the json pipe behaves the same as doing JSON.stringify(yourData) in your code

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

edited Mar 30 '22 at 01:21

answered Mar 28 '22 at 18:18

Sebastian Castaldi

8,580
3
32
24

1

Thanks for contributing! If you find time please edit an explanation into the answer as it's recommended to [explain entirely code-based answers](https://meta.stackoverflow.com/q/392712/128421) on StackOverflow. – Sven Viking Mar 29 '22 at 00:36

Formatting a string to JSON Object to disply in HTML In a textarea w/ [(ngModel)]

4 Answers4