javascript - Formatting a string to JSON Object to disply in HTML In a textarea w [(ngModel)] - Stack Overflow

admin管理员组

文章数量:1277903

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:

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:

• javascript
• html
• json
• angular
• format

Share Improve this question Follow edited Apr 1, 2019 at 16:06 Flash asked Apr 1, 2019 at 14:49 FlashFlash 1,01455 gold badges2626 silver badges4747 bronze badges 6

• Possible duplicate of Angular 2 pipe that transforms JSON object to pretty-printed JSON – peinearydevelopment Commented Apr 1, 2019 at 14:51
• 3 Your string isn't valid JSON. – Mark Commented Apr 1, 2019 at 14:52
• 1 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ı Commented Apr 1, 2019 at 14:52
• What do you mean my fields are not string? and what would be the solution then? – Flash Commented Apr 1, 2019 at 14:56
• Possible duplicate of Pretty Json object in html – nircraft Commented Apr 1, 2019 at 15:07

 |  Show 1 more ment

4 Answers 4

Sorted by: Reset to default 8

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.

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}}.

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./

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>

本文标签： javascriptFormatting a string to JSON Object to disply in HTML In a textarea w (ngModel)Stack Overflow