Форматирование строки в объект JSON для отображения в HTML В текстовой области w / [(ngModel)]

Question

У меня есть строковый объект json, который я пытаюсь отформатировать и отобразить в html. Я попытался использовать JSON.parse() и JSON.stringify(), но typeof по-прежнему отображается в виде строки и отображается в виде прямой линии вместо форматирования. Я также попробовал {{formatJson | json}} и все еще безуспешно.

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

->

Желаемый вывод:

Answer 1

Попробуйте это:

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>

проверьте этот стек-блиц для угловой версии : в Angular вам просто нужно пропустить данные JSON через json канал, и все будет в порядке.

Answer 2

Я применил его в угловом материале Dialog, как этот

в файле ts

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

в HTML

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

</ Мат-диалог-контент>

в CSS

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

}

Успешно, только если это действительно JSON, вы можете использовать довольно JSON, чтобы проверить из него http://jsonprettyprint.com/

Answer 3

Пожалуйста, попробуйте это.Обновите строку JSON, как показано ниже:

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

Вы можете применить угловую трубу к formatJSON в вашем html, как это {{formatJSON |JSON}}